图表js，动态加载数据

本文关键字：加载 数据 动态 js 图表 | 更新日期: 2023-09-27 18:15:10

我试图从我的ViewModel加载数据到图表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>

图表js，动态加载数据

看起来您正在尝试将。net整数列表分配给jQuery函数。当你混合了两种语言时，这是行不通的。你需要先将List序列化为JSON。

您可以使用Newtonsoft Json nuget包实现此功能:

using Newtonsoft.Json;
var data= JsonConvert.SerializeObject(Model.reject_count);
相关文章：