Question

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

这是转换后的C＃List到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;
    }

Flot Chart Conversion C＃Javascript / AJAX - 条形图

1 个答案: