使用 Asp.Net MVC,我尝试创建一个网页,使用 chart.js 在单个页面上显示多个条形图图书馆。每个图表都有不同的数据,并在其自己的局部 View 中创建。虽然没有创建多个不同的图表,但最后的图表数据覆盖了页面上的第一个图表,所有剩余的图表都显示为空白。如下图所示,“Title and Segments”数据和图例覆盖了“Producers”数据,“Title and Segments”图表为空。
在主视图页面上,我使用 foreach 循环为每个报告呈现相同的部分 View 。
@foreach (Report report in Model.Reports)
{
@Html.Partial("BarChartPartialView", report);
}
在我的局部 View 中,我根据模型中的值为 Canvas 对象创建了一个动态 ID 名称。这是为了克服 Chart.js - Multiple Line Charts - Only Show Last Chart 中提到的问题的尝试。 .
@{
string name = "canvas" + Model.CurrentReport.ID;
}
然后我使用动态 ID 创建一个 Canvas 对象。
<canvas id="@name"></canvas>
在我的局部 View 中的 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
最佳答案
我认为问题在于 barChartData
被每个局部 View 覆盖。尝试将该变量放入文档就绪函数中。
或者,使用自执行函数来完成所有图表工作。
(function(){
var data = {};
})();
基本上,问题在于每个局部 View 都将 barChartData
的副本添加到页面。其中每一个都在窗口范围内定义。所以页面看起来像这样:
<script>
var barChartData = {
labels: ModelOneLabels,
datasets: ModelOneData
};
...
</script>
<script>
var barChartData = {
labels: ModelTwoLabels,
datasets: ModelTwoData
};
...
</script>
这将为模型留下两个值的 barChartData
。
您应该能够查看生成的页面并看到多个脚本标签。您浏览器开发人员工具中的控制台也应该进行验证。
修复方法如下:
<script>
$(document).ready(function () {
var barChartData = {
labels: [@Html.Raw(Model.Labels)],
datasets: [@Html.Raw(Model.Data)]
};
var ctx = document.getElementById('@name').getContext('2d');
// I am not sure how you are using the window.myBar@name var
// if you are referencing it later than you may need to adjust this part
var myBar = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
elements: {
rectangle: {
borderWidth: 2,
borderColor: 'rgb(0, 255, 0)',
borderSkipped: 'bottom'
}
},
legend: {
position: 'bottom'
},
title: {
display: true,
text: '@Model.CurrentReport.Name'
}
})
});
</script>
关于javascript - 部分 View 中的多个 Chart.js 图表相互覆盖,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37008967/