0

jquery チャート (FLOT) を読み込もうとしていますが、MVC4.0 でデータソース (Json) をチャートに割り当てるときに苦労しています。

以下のコードは、チャートをプロットするために使用しています。temp.var d2,d3,d4 を使用しましたが、グラフが表示されます。しかし、データベースからチャートにjsonデータを使用したいです。

コード スニペットを以下に示します。Json データを使用してデータを Flot チャートにバインドするにはどうすればよいですか。私のチャートでは、Y 軸に日付、X 軸に F_Rate を表示する必要があります。トレンドラインも上限と下限のように静的になります。参照用に添付されたグラフ。

提案してください。

$(function () {

    //var d1 = [];
    //for (var i = 0; i < 14; i += 0.5) {
    //    d1.push([i, Math.sin(i)]);
    //}

    var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];

    //Trendlines
    var d3 = [[0, 15], [15, 15]];

    var d4 = [[0, 8], [8, 8]];
    //End trend lines


// Debug using Firebugg,Json have data in format [{"1/1/2013",1.0001},{..}]
        $.getJSON("/Home/JsonValues", function (data) {
            //alert(JSON.stringify(data));
           // var jdata = JSON.stringify(data);
           // $.each(JSON.stringify(jdata), function (i, el) {
                //alert(el.Id + ' - ' + el.TagNo);
            //});
        });




    var placeholder = $("#placeholder");
    var plot = $.plot(placeholder, [d2, d3, d4],
        {
            grid: {
                hoverable: true,
                clickable: true
            }

        }

        );

    $("<div id='tooltip'></div>").css({
        position: "absolute",
        display: "none",
        border: "1px solid #fdd",
        padding: "2px",
        "background-color": "#fee",
        opacity: 0.80
    }).appendTo("body");


    $("#placeholder").bind("plothover", function (event, pos, item) {

        if ($("#enablePosition:checked").length > 0) {
            var str = "(" + pos.x.toFixed(2) + "," + pos.y.toFixed(2) + ")";
            $("#hoverdata").text(str);
        }

        if ($("#enableTooltip:checked").length > 0) {
            if (item) {
                var x = item.datapoint[0].toFixed(2),
                    y = item.datapoint[1].toFixed(2);

                $("#tooltip").html("(" + x + "," + y + "")
                    .css({ top: item.pageY + 5, left: item.pageX + 5 })
                    .fadeIn(200);
            } else {
                $("#tooltip").hide();
            }
        }
    });



    // Add the Flot version string to the footer

    // $("#footer").prepend("Flot " + $.plot.version + " &ndash; ");
});


<div id="content">

<div class="demo-container">
    <div id="placeholder" class="demo-placeholder"></div>
</div>

<p class="message"></p>
<p>
    <label>
        <input id="enablePosition" type="checkbox" checked="checked"></input>Show mouse position</label>
    <span id="hoverdata"></span>
    <span id="clickdata"></span>
</p>
<p>
    <label>
        <input id="enableTooltip" type="checkbox" checked="checked"></input>Enable tooltip</label>
</p>

以前の助けは本当に大歓迎です。

前もって感謝します

4

1 に答える 1

1

データは flot の正しい形式である必要があります。つまり、

  1. 配列 (ポイント) の配列 (データセット) の配列、オブジェクトなし
  2. 日時の値はタイムスタンプに変換する必要があります (ドキュメントを参照してください)

データは次のようになります。

[[[1356998400 ,1.0001], [1356998460, 1.5001]]]
于 2013-08-13T08:27:27.507 に答える