3

jsonを返すことができる[Webmethod]を使用してtest.aspx.csファイルのデータベースに接続したフロートチャートにASP.NET Webフォームを使用しています。

戻り値を textarea と $.plot(placeholder, [and also here], options) の両方に保存しましたが、グラフはプレースホルダーに出力されません。

var data = past

ここに textarea の値を入力して applicationn を実行すると、値が出力されます。

[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");
            }
        });
4

1 に答える 1

1

まず、JSON を自分で作成する理由を教えてください。属性で JSON を返すように既に指定しています。次のようなPOCOオブジェクトの単純な配列を返すRefactoreメソッド

[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にアクセスして、データを実際のサンプルと比較してください。

これは、プロットの凡例の名前を初期化する方法です。

$(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"] }
        }
    });
});
于 2012-11-20T08:10:26.933 に答える