返回 Json 时带有 flot.js 图表的 Asp.net webform 不起作用

Question

我正在使用 ASP.NET webforms 绘制图表，我使用 [Webmethod] 连接到 test.aspx.cs 文件中的数据库，我可以在其中返回 json。

我将返回值存储在 textarea 和 $.plot(placeholder, [and also here], options) 中，但当我这样做时，它不会在占位符中打印图形:

var data = past

在此处输入 textarea 的值并运行应用程序，它会向我打印该值。

[WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public static List<string> GetLocation(string location)
        {
            List<string> result = new List<string>();

            StringBuilder strQuery = new StringBuilder();
            strQuery.Append("SELECT Location.Nome_Location, DATEPART(day, Statistiche.Data_Statistica) AS SDay, COUNT(Statistiche.ID_Tabella) AS Stats");
            strQuery.Append("  FROM Statistiche INNER JOIN Tabelle ON Statistiche.ID_Tabella = Tabelle.ID_Tabella INNER JOIN");
            strQuery.Append(" Location ON Statistiche.ID_Colonna_Statistica = Location.ID_Location");
            strQuery.Append(" WHERE (Statistiche.ID_Tabella = 2) AND (Statistiche.ID_Box = 60) AND (Location.Nome_Location = 'Albilò')");
            strQuery.Append("GROUP BY Location.Nome_Location, DATEPART(day, Statistiche.Data_Statistica)");
            string query = strQuery.ToString();

            SqlConnection con = new SqlConnection("");
            SqlCommand cmd = new SqlCommand(query, con);

            con.Open();
            int counter = 1;
            SqlDataReader dr = cmd.ExecuteReader();
            while (dr.Read())
            {
                if (counter == 1)
                {
                    result.Add("[{'label': 'Europe (EU27)','data':[[" + dr["SDay"].ToString() + "," + dr["Stats"].ToString() + "]");
                }
                else
                result.Add("[" + dr["SDay"].ToString() + "," + dr["Stats"].ToString() + "]");
                if (counter==31)
                {
                    result.Add("[" + dr["SDay"].ToString() + "," + dr["Stats"].ToString() + "]]}]");
                }
                counter++;
            }
            return result;
        }

---

$.ajax({
            type: "POST",
            async: true,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            url: "test.aspx/GetLocation",
            data: "{'location':'Albilò'}",
            success: function drawChart(msg) {
                var options = { lines: { show: true }, points: { show: true }, xaxis: { tickDecimals: 0, tickSize: 1} };


                var ddata = [];


                var data = msg.d;


                for (var i = 0; i < 32; i++) {
                    ddata.push(data[i]);
                }


                var placeholder = $("#placeholder");
                $("#txtvalue").val(ddata);

                var datad = $("#txtvalue").text();

                $.plot(placeholder, ddata, options);

            },
            error: function () {
                alert("call is called111");
            }
        });

Answer 1

首先，为什么要自己创建JSON？您已经指定在属性中返回 JSON。 重构方法返回简单的 POCO 对象数组，如

[Serializable]
public class pocoObject
{
  public string Label;
  ..
}

那么你的方法应该只返回对象列表并设置属性:

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static List<pocoObject> GetLocation(string location)
{
  ...
  return result; // result is list of pocoObjects
}

Flot.js 对你设置为源的数据相当敏感，所以在这之后看看firebug 中的数据，它应该是正确的json 格式数据。所以请访问wiki并将您的数据与工作数据进行比较 samples .

这就是如何初始化情节的图例名称:

$(function () {
    var d1 = [];
    for (var i = 0; i < Math.PI * 2; i += 0.25)
        d1.push([i, Math.sin(i)]);

    var d2 = [];
    for (var i = 0; i < Math.PI * 2; i += 0.25)
        d2.push([i, Math.cos(i)]);

    var d3 = [];
    for (var i = 0; i < Math.PI * 2; i += 0.1)
        d3.push([i, Math.tan(i)]);

    $.plot($("#placeholder"), [
        { label: "sin(x)",  data: d1},
        { label: "cos(x)",  data: d2},
        { label: "tan(x)",  data: d3}
    ], {
        series: {
            lines: { show: true },
            points: { show: true }
        },
        xaxis: {
            ticks: [0, [Math.PI/2, "\u03c0/2"], [Math.PI, "\u03c0"], [Math.PI * 3/2, "3\u03c0/2"], [Math.PI * 2, "2\u03c0"]]
        },
        yaxis: {
            ticks: 10,
            min: -2,
            max: 2
        },
        grid: {
            backgroundColor: { colors: ["#fff", "#eee"] }
        }
    });
});