javascript - 在 Chart.js MVC c# 中使用来自模型的数据

Question

我正在尝试使用 Chart.js 制作图表，但我无法将模型中的数据放入图表中...有人可以帮我解决这个问题吗？

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>

<canvas id="myChart" width="400" height="400"></canvas>
<script >
var ctx = document.getElementById('myChart').getContext('2d');
@{ 
    List<String> listKeys = new List<string>();
    List<int> listValues = new List<int>();
    foreach(var x in Model.PageViews)
    {
        listKeys.Add(x.Key + "");
        listValues.Add(x.Value);
    }
}

var chart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: @listKeys,
        datasets: [{
            label: "My First dataset",
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: @listValues
        }]
    },
    options: {}
});

我已经尝试了很多东西，但似乎没有任何效果......

Answer 1

@{ } block 中的代码是服务器端的。script 标签的其他内容是客户端。

当您使用@listKeys/@listValues 时，C# 运行ToString() 方法。它生成类似 System.Collections.Generic.List[System.String] 的字符串，而不是列表的内容。您需要生成 json 对象。

使用 @Html.Raw(Json.Serialize(listKeys)) 而不是 @listKeys 来获取带有数据的正确 json 对象。

附言在 View 中使用大量服务器逻辑不是好的做法。您可以删除 @{} block 并获取 Model.PageViews.Keys 和 Model.PageViews.Values

的 json