如何从MVC控制器为Chart.js雷达图加载动态标签与数据？

实现步骤： #

1. 将服务器端ViewBag数据序列化为前端可识别的JSON
   在视图中，使用@Html.Raw(Json.Encode(ViewBag.radarDesc))把ViewBag中的列表数据转换为未编码的JSON字符串，确保前端JS能直接解析。

2. 在JS中提取labels和data数组
   遍历序列化后的JSON数据，分别收集标签和数值，再赋值给Chart.js的对应配置项。

修改后的完整前端代码： #

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.min.js"></script>
<script>
    $(document).ready(function () {
        // 从ViewBag获取序列化后的雷达图数据
        var radarData = @Html.Raw(Json.Encode(ViewBag.radarDesc));
        
        // 提取labels和data数组
        var chartLabels = [];
        var chartData = [];
        radarData.forEach(function(item) {
            chartLabels.push(item.Label);
            chartData.push(item.Data);
        });

        var ctx = $("#chart-line");
        var myLineChart = new Chart(ctx, {
            type: 'radar',
            data: {
                labels: chartLabels,  // 填充标签
                datasets: [{
                    data: chartData,   // 填充数据
                    label: "MyData",
                    borderColor: "#458af7",
                    backgroundColor: '#458af7',
                    fill: true
                }]
            },
            options: {
                title: {
                    display: true,
                    text: '(Max points - 300)'
                }
            }
        });
    });
</script>
<canvas id="chart-line" width="299" height="200" class="chartjs-render-monitor" style="display: block; width: 299px; height: 200px;"></canvas>

补充说明： #

• 控制器代码无需修改，建议将变量名modelIist修正为modelList（不影响功能但更符合命名规范）。
• Json.Encode会把服务器端的List<MyModel>序列化为JSON数组，前端通过forEach遍历即可提取所需字段。
• @Html.Raw用于避免JSON字符串被HTML编码，保证JS能正确解析数据结构。

内容的提问来源于stack exchange，提问作者cr7oo