Javascript 在Chart.js MVC中使用模型中的数据#

我正试图用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: {}
});

var ctx=document.getElementById（'myChart'）.getContext（'2d'）；
@{ 
List listKeys=新列表（）；
List listValues=新列表（）；
foreach（Model.PageViews中的变量x）
{
添加（x.Key+“”）；
listValues.Add（x.Value）；
}
}
var图表=新图表（ctx{
键入：“行”，
数据：{
标签：@listKeys，
数据集：[{
标签：“我的第一个数据集”，
背景颜色：“rgb（255，99，132）”，
边框颜色：“rgb（255，99，132）”，
数据：@listValues
}]
},
选项：{}
});

---

我尝试了多种方法，但似乎没有任何效果…

在JavaScript代码中使用.NET变量不是一种好的做法。

---

正确的方法是为要在js函数中使用的值创建隐藏的html元素，或者使用将图表数据作为Json对象返回的API。

块

@{}

中的代码是服务器端。

脚本

-标记的其他内容是客户端

当您使用

@listKeys

/

@listValues

时，C#运行

ToString（）

方法。它生成类似于

System.Collections.Generic.List[System.string]

的字符串，而不是列表的内容。您需要生成json对象

使用

@Html.Raw（Json.Serialize（listKeys））

而不是

@listKeys

来获取正确的Json对象和数据

---

另外，在视图中使用大量服务器逻辑不是一个好的做法。您可以删除

@{}

块并获取

Model.PageViews.Keys

和

Model.PageViews.Values

的json，您的模型应该包含属性

IEnumerable标签

和

IEnumerable值

，然后使用

var标签=@Html.Raw.json.encodel（Model.Labels）)

ect将模型转换为javascript阵列Tankyu Sergey，这对我很有帮助！