Question

我正在尝试加载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>

早期的帮助将非常感激。

先谢谢

Answer 1

您的数据必须采用正确的flot格式，即

数组（点）的数组（数据集）数组，无对象
必须将日期时间值转换为时间戳（请参阅the documentation）

数据应如下所示：

[[[1356998400 ,1.0001], [1356998460, 1.5001]]]

使用MVC4.0中的Flot库绘制图表

1 个答案: