Question

好的，所以我在C＃中使用MVC4，我必须使用视图模型中的元素填充javascript数组。我正在尝试动态填充Chart.js饼图。这是我的示例代码：

<script src="~/Scripts/Chart.js"></script>
<script type="text/javascript">

    var data = [
        {
            value: 30,
            color: "#F38630"
        },
        {
            value: 50,
            color: "#E0E4CC"
        },
        {
            value: 100,
            color: "#69D2E7"
        }
        ]
    //Get the context of the canvas element we want to select
    var ctx = document.getElementById("myChart").getContext("2d");
    var myNewChart = new Chart(ctx).Pie(data);
    //Get context with jQuery - using jQuery's .get() method.
    var ctx = $("#myChart").get(0).getContext("2d");
    //This will get the first returned node in the jQuery collection.
    var myNewChart = new Chart(ctx);
    new Chart(ctx).Pie(data, options);
</script>

我希望能够在for循环中向数据数组添加元素。我试过像这样使用.push

data.push（[{ 价值：30，颜色：“＃F38630” }]）;

但它会阻止图表完全创建。知道怎么做我能做的事情：

foreach (var item in Model.List) {

data.add(item.value)

}

Answer 1

你可能比那更棒。

创建您自己的基本类型以表示您的值/颜色对。

public class MyType 
{
    public string Value {get;set;}
    public string Color {get;set;}
}

在你的剃刀（或后面的代码）中为该类型创建一个数组：

@{
    var values = new List<MyType>();
    // populate with some values.

    JavaScriptSerializer js = new JavaScriptSerializer();
    string json = js.Serialize(keyValues.ToArray());
}

然后在你的Javascript中：

<script type="text/javascript">

    var data = @json; // TADA!!

    //Get the context of the canvas element we want to select
    var ctx = document.getElementById("myChart").getContext("2d");
    var myNewChart = new Chart(ctx).Pie(data);

    //... etc.

</script>

如果您在序列化该列表时遇到任何问题，我建议使用Json.Net来改进C＃本机序列化程序。

Answer 2

您的data是一个数组（请参阅括号[]）。

现在，您尝试将包含单个对象的数组添加到数组中：

[{ value...

只需将其更改为对象{}即可。

{ value ... }

使用Razor C＃将对象动态添加到javascript数组

2 个答案: