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