jquery 如何在图表中加载控制器的动态标签和数据?

7d7tgy0s  于 2022-11-22  发布在  jQuery
关注(0)|答案(1)|浏览(128)

我正在使用列表加载雷达图从控制器。我如何加载动态标签和数据,该图表从控制器。

List<MyModel> modelIist = new List<MyModel>();   
        MyModel model = new MyModel();
        model.Data = 1;
        model.Label = "First";
        modelIist.Add(model);
        model = new MyModel();
        model.Data = 2;
        model.Label = "Second";
        modelIist.Add(model);
        model = new MyModel();
        model.Data = 3;
        model.Label = "Third ";
        modelIist.Add(model); 
        ViewBag.radarDesc = modelIist;

我正在从上面的列表加载数据。
第一次
如何加载标签:[],数据:来自mvc的[]。

hm2xizp9

hm2xizp91#

试试 这个 办法 :
安装 Microsoft.AspNetCore.Mvc.NewtonsoftJson NuGet 包 , 然后 将 ViewBag.radarDesc 序列 化 为 有效 的 JavaScript 数组 :

ViewBag.radarDesc = Newtonsoft.Json.JsonConvert.SerializeObject(modelIist);

中 的 每 一 个
然后 取出 Page 中 的 LabelData , 填入 相应 位置 :

$(document).ready(function () {
        var Label = [];
        var Data = [];
        var radarDesc = @Html.Raw(@ViewBag.radarDesc);
        $.each(radarDesc, function (index, value) {
            Label.push(value.Label);
            Data.push(value.Data);
        });

        var ctx = $("#chart-line");
        var myLineChart = new Chart(ctx, {
            type: 'radar',
            data: {
                labels: Label,  //want to load from the list
                /*},*/

                datasets: [{
                    data: Data,//want to load from the list
                    label: "MyData",
                    borderColor: "#458af7",
                    backgroundColor: '#458af7',
                    fill: true
                }]
            },
            options: {
                title: {
                    display: true,
                    text: '(Max points - 300)'
                }
            }
        });
    });

格式
测试 结果 :

相关问题