0

我正在尝试加载一个 jquery 图表（FLOT），但是在将数据源（Json）分配给 MVC4.0 中的图表时遇到了很多困难

下面的代码我用来绘制图表。我使用了 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

您的数据必须采用正确的浮点格式，这意味着

  1. 数组数组（数据集）数组（点），没有对象
  2. 日期时间值必须转换为时间戳（请参阅文档）

数据应如下所示：

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