使用Asp.Net MVC,我正在尝试使用chart.js库创建一个在单个页面上显示多个条形图的网页 . 每个图表都有不同的数据,并在其自己的局部视图中创建 . 但是,最后的图表数据不是创建多个不同的图表,而是覆盖页面上的第一个图表,所有剩余的图表显示为空白 . 如下图所示,"Title and Segments"数据和图例覆盖"Producers"数据,"Title and Segments"图表为空 .
在主视图页面上,我使用foreach循环为每个报表呈现相同的局部视图 .
@foreach (Report report in Model.Reports)
{
@Html.Partial("BarChartPartialView", report);
}
在我的局部视图中,我基于Model中的值为canvas对象创建动态ID名称 . 这是为了克服Chart.js - Multiple Line Charts - Only Show Last Chart中提到的问题 .
@{
string name = "canvas" + Model.CurrentReport.ID;
}
然后,我使用动态ID创建一个canvas对象 .
<canvas id="@name"></canvas>
在我的局部视图中的chart.js脚本中,我使用eval()创建动态ctx和myBar变量 . (想法来源:How do i declare and use dynamic variables in javascript?)
<script>
var barChartData = {
labels: [@Html.Raw(Model.Labels)],
datasets: [@Html.Raw(Model.Data)]
};
$(document).ready(function () {
eval("var ctx" + "@name" + "=document.getElementById('@name').getContext('2d');");
var temp = new Chart(eval('ctx' + '@name'), {
type: 'bar',
data: barChartData,
options: {
elements: {
rectangle: {
borderWidth: 2,
borderColor: 'rgb(0, 255, 0)'
}
},
legend: {
position: 'bottom'
},
title: {
display: true,
text: '@Model.CurrentReport.Name'
}
}
});
eval('window.myBar' + '@name' + "= temp;");
});
</script>
我见过其他类似的问题,但似乎没有一个解决我的问题:
multiple chartjs in the same page
Rendering HTML5 Charts in partial views show only blank data
1 回答
我认为问题是每个部分视图都会覆盖
barChartData
. 尝试将该变量放在文档就绪函数中 .或者,使用自执行功能来完成所有图表内容 .
基本上,问题是每个部分视图都在向页面添加
barChartData
的副本 . 每个都在窗口范围中定义 . 所以页面看起来像这样:这将留下
barChartData
与模型二值 .您应该能够查看生成的页面并查看多个脚本标记 . 浏览器开发人员工具中的控制台也应该验证 .
以下是如何解决它: