javascript - 使用 cshtml 制作 Morris.js 图表

Question

使用 C# 和 ASP.Net 架构，我尝试显示 morris.js 图表。尽管如此，我并不完全理解如何调整我的 c# List<List<int>>到所需的格式。有任何想法吗 ？

这是我的代码:

1) 如何在 C# 中构建我的列表

public List<List<int>> DataModel { get; private set; }
public void GenerateDataModel()
{
    List<List<int>> tempo = new List<List<int>>();
    Random rnd = new Random();
    for (int i = 0; i < 100; i++)
    {

        List<int> un = new List<int>() { i, rnd.Next(10) };
        tempo.Add(un);
    }
    DataModel = tempo;
    for (int i = 0; i < 100; i++)
    {
        System.Diagnostics.Debug.WriteLine(DataModel[i][0]);
        System.Diagnostics.Debug.WriteLine(DataModel[i][1]);
    }

}

2)我如何实现莫里斯脚本:(受到 this 问题的启发)

<script>
    var datas = @Model.DataModel;
    var myArray = [];
    var z = 0;
    for (var tot = @Model.DataModel.Count(); z < tot; z++) {
        myArray.push({ 'year': datas[z][0], 'value': datas[z][1]});
    }
    new Morris.Line({
        // ID of the element in which to draw the chart.
        element: 'myfirstchart',
        // Chart data records -- each entry in this array corresponds to a point on
        // the chart.
        data: myArray,
        // The name of the data record attribute that contains x-values.
        xkey: 'year',
        // A list of names of data record attributes that contain y-values.
        ykeys: ['value'],
        // Labels for the ykeys -- will be displayed when you hover over the
        // chart.
        labels: ['Value']
    });
</script>

我最终得到的(应该是“销售”框中的东西):

Answer 1

您的<script>的内容标签由服务器和浏览器处理。服务器处理以 @ 开头的部分然后它将结果发送到运行 JavaScript 代码的浏览器。

当您在 @ 之后仅指定一个表达式时服务器将其替换为表达式的值。如果该值是一个对象，您将得到 .ToString() 的结果调用该对象。为您List<List<int>>它不会太漂亮或太有用:

var datas = System.Collections.Generic.List`1[System.Collections.Generic.List`1[System.Int32]];

您可以使用浏览器中的 F12 工具进行检查。

有多种方法可以调整您的代码以获得您想要的结果。

首先，您可以使用 Newtonsoft.Json 库，该库已包含在每个 ASP.NET 项目中。添加@using Newtonsoft.Json.Linq;在 2) 中 View 的顶部，然后将您的分配替换为 datas具有以下内容:

var datas = @JArray.FromObject(Model.DataModel).ToString(Newtonsoft.Json.Formatting.None);

其次，您可以生成 myArray通过拉动 for 在服务器上构建结构从 JavaScript 循环到 C#:

    var myArray = [
    @for (var i = 0; i<Model.DataModel.Count; i++)
    {
        @:{ 'year': @Model.DataModel[i][0], 'value': @Model.DataModel[i][1]  },
    }
    ];