javascript - 流程图转换 C# Javascript/AJAX - 条形图

Question

我正在尝试将 C# 列表对象转换为 Flot 条形图的正确格式。由于某种原因，我似乎无法正确完成它。我尝试了几种不同的方法。我返回的 JSON 是有效的 JSON，并且列表有效，但由于某种原因，Flot 图表需要不同格式的数据。任何帮助，将不胜感激。谢谢!

这是转换后的 C# 列表到 JSON 数组

[{"color":"red","data":["Agriculture",0,2]},{"color":"red","data":["Healthcare",0,1]},{"color":"red","data":["Manufacturing",0,0]},{"color":"red","data":["Retail",0,0]},{"color":"red","data":["Information Technology",0,0]}]

我使用这个方法来做到这一点:

    $.ajax({
            type: "POST",
            url: "Summary.asmx/getBarChartSeriesData",
            data: JSON.stringify({ userid: userid }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {

                barSummaryData = response.d;
                var jsonArray = JSON.parse(response.d);
                //this format seems to work
                //var data = [{ data: [[0, 1]], color: "red" }, { data: [[1, 2]], color: "yellow" }, { data: [[2, 3]], color: "green" }];


                var plot = 
                $.plot($('#barSummaryPlaceholder'), jsonArray, {
                    series: {
                        bars: {
                            show: true,
                            barWidth: 0.3,
                            align: "center"
                        }
                    },
                    xaxis: { 
                        ticks: ticks
                    },
                    grid: { hoverable: true, clickable: true }
                });

            },
            failure: function (msg) {
                $('#barSummaryPlaceholder').text(msg);
            }
        });

这是 ASMX 中的 C# 方法:

    public string getSummaryBarChartSeriesData(int userid)
    {

        List<Series> SeriesData = new List<Series>();

        DataTable dt = new DataTable();
        dt.Clear();

        dt = chartcode.RetrieveSummaryBarChartData(userid);
        int countOfRows = 0;

        foreach (DataRow row in dt.Rows)
        {
            List<object> objData = new List<object>();
            objData.Add(row["Name"].ToString());
            objData.Add(countOfRows);
            objData.Add(Convert.ToInt32(row["CountOfStudents"]));

            SeriesData.Add(
             new CareerClusterSeries
             {
                 data = objData,
                 color = "red"
             });

        }

        var jsonSerialiser = new JavaScriptSerializer();
        var json = jsonSerialiser.Serialize(SeriesData);
        return json;
    }

出于某种原因，C# json 字符串对于 JSON 本身来说是有效的格式，但对于我正在尝试使用的图表系统 Flot 图表来说不是正确的格式。

Answer 1

首先，来自文档Flot Reference: Data Format ，data 字段应该是数字数组的数组，例如:

{
    label: "y = 3",
    data: [[0, 3], [10, 3]]
}

相比之下，您有一个扁平的数字数组，其中混合有一个字符串:{"data":["Agriculture",0,2], "color":"red",} 。该字符串的用途是什么——是系列标签吗？

接下来，您是否忘记增加 countOfRows ？在您的代码中它始终为零。

假设您想要增加计数并将 row["Name"] 设置为系列标签，则以下内容应生成符合 API 的 JSON:

public class Series
{
    public string color { get; set; }
    public List<IList<double>> data { get; set; }
    public string label { get; set; }
}

然后:

    public string getSummaryBarChartSeriesData(int userid)
    {
        var SeriesData = new List<Series>();

        DataTable dt = chartcode.RetrieveSummaryBarChartData(userid);

        int countOfRows = 0;
        foreach (DataRow row in dt.Rows)
        {
            var rawData = new List<IList<double>>();
            rawData.Add(new double[] { countOfRows++, Convert.ToInt32(row["CountOfStudents"]) });
            //objData.Add(row["Name"].ToString());

            SeriesData.Add(
             new CareerClusterSeries
             {
                 data = rawData,
                 color = "red",
                 label = row["Name"].ToString(),  // Guessing you wanted this.
             });
        }

        var jsonSerialiser = new JavaScriptSerializer();
        var json = jsonSerialiser.Serialize(SeriesData);
        return json;
    }