使用 MVC 和 CanvasJS 的动态图表答案

【问题标题】：Dynamic charts with MVC and CanvasJS使用 MVC 和 CanvasJS 的动态图表
【发布时间】：2014-11-02 10:31:27
【问题描述】：

我正在尝试从 MVC 模型列表生成 CanvasJS 条形图。这似乎可以生成对象，但是当我尝试渲染图表时 canvasJS 抱怨它找不到数据数组。请问有什么想法吗？

<script>
    var yearbargraphchart = new CanvasJS.Chart("chartContainerbar1");

    yearbargraphchart.options.title = {
        text: "Year attendance: " + " percent_attend var here " + " %",
        fontWeight: "bolder",
        fontColor: "#008B8B",
        fontSize: 20,
        padding: 10
    };

    yearbargraphchart.options.axisX = {
        title: "Axis X Title"
    };
    yearbargraphchart.options.axisY = {
        title: "Axis Y Title"
    };

    var fa = [];
    yearbargraphchart.data = fa;              
</script>


@foreach (var item in Model){
<script>
    var bp = [];
    var obj = {}
   obj.foo = "test";
   test = [];

 bp.push({ label: ' Present: ' + "@(item.Marks_present)" , y: "@(item.Marks_present)" });      

    var n = "dps@(item.Month)";            // set dynamic name for sub array:
    var test = { type: "bar", name: n };      
    test.dataPoints = bp;
    fa.push(test);

   console.log("post yearbargraphchart.data.push " + JSON.stringify(yearbargraphchart.data));
</script>
}

<script>
yearbargraphchart.render();
yearbargraphchart = {};
</script>

【问题讨论】：

标签： javascript asp.net-mvc dynamic charts canvasjs

【解决方案1】：

您有一些数据关系错误。

var fa = [];
yearbargraphchart.data = fa;

这实际上并没有将 'fa' 绑定到 'yearbargraphchart.data' 所以稍后当你这样做时

fa.push(test);

您将数据推送到“fa”中，而该数据不会推送到“yearbargraphchart.data”中

试试这个。而是

yearbargraphchart.data.push(test);

我认为这会解决问题

【讨论】：