部分视图中的多个 Chart.js 个图表相互覆盖

Question

使用 Asp.Net MVC，我正在尝试使用 chart.js 库创建一个在单个页面上显示多个条形图的网页。每个图表都有不同的数据，并在其自己的局部视图中创建。虽然没有创建多个不同的图表，但最后的图表数据覆盖了页面上的第一个图表，所有剩余的图表都显示为空白。如下图所示，"Title and Segments" 数据和图例覆盖了 "Producers" 数据，"Title and Segments" 图表为空。

在主视图页面上，我使用 foreach 循环为每个报表呈现相同的局部视图。

@foreach (Report report in Model.Reports)
{
    @Html.Partial("BarChartPartialView", report);
}

在我的局部视图中，我根据模型中的值为 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>

我看过其他类似的问题，但 none 似乎有解决我的问题的方法：
multiple chartjs in the same page
Rendering HTML5 Charts in partial views show only blank data

Answer 1

我认为问题在于 barChartData 被每个部分视图覆盖。尝试将该变量放入文档就绪函数中。

或者，使用自执行函数来完成所有图表工作。

(function(){
    var data = {};
})();

基本上，问题是每个局部视图都在向页面添加 barChartData 的副本。每个都在 window 范围内定义。所以页面看起来像这样：

<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>

部分视图中的多个 Chart.js 个图表相互覆盖

Multiple Chart.js Charts in Partial Views Overwriting Each Other

javascript

asp.net-mvc

partial-views

chart.js

chart.js2