等效于C＃中的jQuery的数组

Question

我试图在我的Web应用程序中显示一个饼图。 这是在jquery中显示饼图的数据。

var piedata = [
{ label: "Pending", data: 0 },
{ label: "In Progress", data: 65 },
{ label: "Cancelled", data: 15 },
{ label: "Submitted", data: 110 },
{ label: "Open", data: 60 },
{ label: "On Hold", data: 57 }
];

这是显示饼图的jQuery脚本

<script>
    $(document).ready(function () {
        var isPostBackObject = $("#hdnIsPostback");
        alert(isPostBackObject.val());
        if ($("#piechart").length) {
            $.plot($("#piechart"), isPostBackObject.val(),
                {
                    series: {
                        pie: {
                            show: true
                        }
                    },
                    grid: {
                        hoverable: true,
                        clickable: true
                    },
                    legend: {
                        show: false
                    }
                });

            function pieHover(event, pos, obj) {

                if (!obj)
                    return;
                percent = parseFloat(obj.series.percent).toFixed(2);
                $("#hover").html('<span style="font-weight: bold; color: ' + obj.series.color + '">' + obj.series.label + ' (' + percent + '%)</span>');
            }

            $("#piechart").bind("plothover", pieHover);
        }
    });
</script>

由于这是在Jquery中，因此这些都是硬编码的值。 我在上面要设置的数据库中具有ifnormation状态。 如何设置文件后面代码中的数据，以便可以基于db的值显示饼图。

我试图这样设置

var data = new Dictionary<string, string>();
            data.Add("Pending", "10");
            data.Add("New", "40");
            data.Add("Overdue", "50");
            hdnIsPostback.Value = new JavaScriptSerializer().Serialize(data);

该代码确实显示了Piechart，但“ Pending” /“ New”之类的标签未显示在饼图中。 出现未定义。 我该怎么做呢？

Answer 1

您可以使用普通的C＃数组或IEnumerable ..

您定义一个C＃类；

public class PieModel {
    public string label { get; set; }
    public double data { get; set; }
}

并将数据保存到列表中；

var data = new List<PieModel> {
    new PieModel { label = "Pending", data = 10d }
    new PieModel { label = "New", data = 40d }
    new PieModel { label = "Overdue", data = 50d }
};

hdnIsPostback.Value = new JavaScriptSerializer().Serialize(data);

未经测试的代码

使用更新后的答案，您将需要将文本框的值解析为JSON .. JSON.parse ..

var isPostBackObject = $("#hdnIsPostback");

if ($("#piechart").length) {
    $.plot($("#piechart"), JSON.parse(isPostBackObject.val()),

Answer 2

JavaScriptSerializer会将您的字典序列化为包含Key和Value对（ [{Key:"Pending", Value:"0"}...] ）的对象数组，这绝对不是您期望的格式。

您需要将字典投影到包含label和data字段的对象数组中：

var pieData = data.Select(x => new
{
    label = x.Key,
    data = x.Value

}).ToArray();

然后将其序列化为JSON：

hdnIsPostback.Value = new JavaScriptSerializer().Serialize(pieData);

Answer 3

最好的等效IMO是C#4.0+及更高C#4.0+的dynamic List和匿名类型（对象）

  var data=new List<dynamic>(){             
    new { label = "Pending", data = 10d },
    new { label = "New", data = 40d },
    new { label = "Overdue", data = 50d }
    };
   var serialised = new JavaScriptSerializer().Serialize(data);