передача данных в модуль графиков highcharts
есть проект написанный с помощью с#.net с применением технологии mvs3. в нём надо построить графики highcharts. В данный момент модуль графиков подключен, однако выводиться только один график (вместо некоторого количества, зависящего от количества вопросов хранящихся в БД), причём с фейковыми данными
вот код представления, контролер и модели приводить не буду, всё равно без бд проект не нормально работать не будет
Код:
@model Fist.INsci.Models.InterView
@using Microsoft.Web.Helpers
@{
ViewBag.Title = "ListAnsver";
}
<h2>Результаты опросов</h2>
<script src="@Url.Content("~/Content/js/highcharts.js")" type="text/javascript"></script>
<script type="text/javascript">
//debugger;
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
title: {
text: "question",
},
subtitle: {
text: ''
},
xAxis: {
categories: ["answer"],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'количество',
align: 'high'
}
},
tooltip: {
formatter: function () {
return '' +
this.series.name + ': ' + this.y;
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -200,
y: 400,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
credits: {
enabled: true
},
series: [{
name: "количество вопросов",
data: [107, 31, 235]
}]
});
});
</script>
<script type="text/javascript">
function sendAnonimInterView() {
var isValid = 1;
var answers = new Array();
var interview = {
jsonanswers: "",
recaptcha_challenge_field: $("#recaptcha_challenge_field").val(),
recaptcha_response_field: $("#recaptcha_response_field").val(),
id: $("#ID").val()
};
$("#listQuestions >li").each(function(i) {
if (!$(this).find("#listAnswers").find("input:radio:checked").val() && isValid) {
isValid = 0;
}
answers[i] = {
InterViewID: $("#ID").val(),
InterViewQuestionID: $(this).attr("itemid"),
InterViewAnswerID: $(this).find("#listAnswers").find("input:radio:checked").val()
};
});
interview.jsonanswers = JSON.stringify(answers);
}
</script>
<div>
<br/>
@Html.HiddenFor(m => m.ID)
<table width="400px">
<tr>
<td><b>Название опроса</b></td>
<td>@Model.Title</td>
</tr>
<tr>
<td><b>Описание опроса</b></td>
<td>@Model.Description</td>
</tr>
</table>
<ol id="listQuestions">
@foreach (var question in Model.InterViewQuestion.OrderBy(q => q.Number))
{
<table border="300" width="400px">
<th colspan="2"> @question.Text </th>
<div id="listAnswers">
<tr>
<th>Ответ</th>
<th>Колличество ответов</th>
</tr>
@foreach (var answer in question.InterViewAnswer.OrderBy(q => q.Number))
{
<tr>
<td width="200">@answer.Text </td>
<td width="200">@answer.AnonimAnswer.Count</td>
</tr>
}
<tr >
<th colspan="2" >график</th>
</tr>
<tr><td colspan="2">
<div id="container" style="width: 400px; height: 400px; margin: 0 auto"></div>
</td> </tr>
}
</div>
</table>
}
</ol>
@Html.ActionLink("Назад", "InterViewCours")
</div>
@using Microsoft.Web.Helpers
@{
ViewBag.Title = "ListAnsver";
}
<h2>Результаты опросов</h2>
<script src="@Url.Content("~/Content/js/highcharts.js")" type="text/javascript"></script>
<script type="text/javascript">
//debugger;
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
title: {
text: "question",
},
subtitle: {
text: ''
},
xAxis: {
categories: ["answer"],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'количество',
align: 'high'
}
},
tooltip: {
formatter: function () {
return '' +
this.series.name + ': ' + this.y;
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -200,
y: 400,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
credits: {
enabled: true
},
series: [{
name: "количество вопросов",
data: [107, 31, 235]
}]
});
});
</script>
<script type="text/javascript">
function sendAnonimInterView() {
var isValid = 1;
var answers = new Array();
var interview = {
jsonanswers: "",
recaptcha_challenge_field: $("#recaptcha_challenge_field").val(),
recaptcha_response_field: $("#recaptcha_response_field").val(),
id: $("#ID").val()
};
$("#listQuestions >li").each(function(i) {
if (!$(this).find("#listAnswers").find("input:radio:checked").val() && isValid) {
isValid = 0;
}
answers[i] = {
InterViewID: $("#ID").val(),
InterViewQuestionID: $(this).attr("itemid"),
InterViewAnswerID: $(this).find("#listAnswers").find("input:radio:checked").val()
};
});
interview.jsonanswers = JSON.stringify(answers);
}
</script>
<div>
<br/>
@Html.HiddenFor(m => m.ID)
<table width="400px">
<tr>
<td><b>Название опроса</b></td>
<td>@Model.Title</td>
</tr>
<tr>
<td><b>Описание опроса</b></td>
<td>@Model.Description</td>
</tr>
</table>
<ol id="listQuestions">
@foreach (var question in Model.InterViewQuestion.OrderBy(q => q.Number))
{
<table border="300" width="400px">
<th colspan="2"> @question.Text </th>
<div id="listAnswers">
<tr>
<th>Ответ</th>
<th>Колличество ответов</th>
</tr>
@foreach (var answer in question.InterViewAnswer.OrderBy(q => q.Number))
{
<tr>
<td width="200">@answer.Text </td>
<td width="200">@answer.AnonimAnswer.Count</td>
</tr>
}
<tr >
<th colspan="2" >график</th>
</tr>
<tr><td colspan="2">
<div id="container" style="width: 400px; height: 400px; margin: 0 auto"></div>
</td> </tr>
}
</div>
</table>
}
</ol>
@Html.ActionLink("Назад", "InterViewCours")
</div>
0. нужно создать класс который будет описывать структуру графика..то есть массив значений по х и массив значений по y
1. в контроллере сформировать массив массивов это делается при выводе в таблицы
3. при рендере в файле cshtml то есть в представлении в цикле записать данные из этого масива в хидденфилд смотри расширение @Html.Hidden или прописывай тег <input type=hidden
4. после рендера страницы нужно пробежаться по этим хидденфилдам и построить графики
Цитата:
0. нужно создать класс который будет описывать структуру графика..то есть массив значений по х и массив значений по y
1. в контроллере сформировать массив массивов это делается при выводе в таблицы
3. при рендере в файле cshtml то есть в представлении в цикле записать данные из этого масива в хидденфилд смотри расширение @Html.Hidden или прописывай тег <input type=hidden
4. после рендера страницы нужно пробежаться по этим хидденфилдам и построить графики
Приступайте !