图表js，动态加载数据答案

【问题标题】：chart js, loading data dynamically图表js，动态加载数据
【发布时间】：2016-10-27 12:50:57
【问题描述】：

我正在尝试将数据从我的 ViewModel 加载到 Chart Js 中。看来我很接近了，但可能我的 javascript 语法有点不对劲。

我的模型包含一个整数列表。目前，硬编码为三个不同的整数。有没有人做过类似于我想要实现的事情？

这是我的看法：

@model CRADV.ViewModel.RejectMessageReportViewModel

@{
    List<int> data = Model.reject_count;
    var labels = Model.messages;
    var colors = new[] {  "#FF6384", "#36A2EB", "#FFCE56" };
}
<div class="col-lg-4">
    <canvas id="pie-chart" width="400" height="400"></canvas>

    @Model.reject_count.FirstOrDefault()
</div>
<script type="text/javascript">
    var data = '@data.ToList()';
    var ctx = document.getElementById("pie-chart");
    var myPieChart = new Chart(ctx, {
        type: 'pie',
        data: {
            labels: [
                        "#FF6384",
                        "#36A2EB",
                        "#FFCE56"
            ],
            datasets: [
                {
                    data: data,
                    backgroundColor: [
                        "#FF6384",
                        "#36A2EB",
                        "#FFCE56"
                    ],
                    hoverBackgroundColor: [
                        "#FF6384",
                        "#36A2EB",
                        "#FFCE56"
                    ]
                }]
        }
    });
</script>

【问题讨论】：

标签： javascript c# razor chart.js

【解决方案1】：

看起来您正在尝试将 .NET 整数列表分配给 jQuery 函数。当您混合两种语言时，这永远不会起作用。您需要先将 List 序列化为 JSON。

您可以使用 Newtonsoft Json nuget 包实现此目的：

using Newtonsoft.Json;

var data= JsonConvert.SerializeObject(Model.reject_count);

【讨论】：

好的，我可以试一试。