带有变量数据和 JSON 数据的 jqplot 图表

Question

我正在尝试通过变量将数据加载到 jqplot 图表中，但它只显示第一个值。我不知道为什么要这样做。

JavaScript:

    $(document).ready(function () {

        var sin = [[20, 10, 0, 10, 15, 25, 35, 50, 48, 45, 35, 30, 15, 10]];

        var plot = $.plot($(".chart"),
               [{ data: sin, label: "sin(x)", color: "#ee7951" }], {
                   series: {
                       lines: { show: true },
                       points: { show: true }
                   },
                   grid: { hoverable: true, clickable: true },
                   yaxis: { min: 0, max: 60 }
               });

        var previousPoint = null;
        $(".chart").bind("plothover", function (event, pos, item) {

            if (item) {
                if (previousPoint != item.dataIndex) {
                    previousPoint = item.dataIndex;

                    $('#tooltip').fadeOut(200, function () {
                        $(this).remove();
                    });
                    var x = item.datapoint[0].toFixed(2),
                        y = item.datapoint[1].toFixed(2);

                    maruti.flot_tooltip(item.pageX, item.pageY, item.series.label + " of " + x + " = " + y);
                }

            } else {
                $('#tooltip').fadeOut(200, function () {
                    $(this).remove();
                });
                previousPoint = null;
            }
        });

    });

    maruti = {
        flot_tooltip: function (x, y, contents) {
            $('<div id="tooltip">' + contents + '</div>').css({
                top: y + 5,
                left: x + 5
            }).appendTo("body").fadeIn(200);
        }
    }

</script>

最终，我更愿意使用 JSON 格式数据，并将第一个值用于图表，第二个值用于轴。

数据：

[["50.00","3/18/2015 2:00:00 下午"],["37.00","3/12/2015 3:42:44 下午"],["35.00" ","3/11/2015 3:42:44 下午"]]

任何建议或 link 使用此类数据的示例将不胜感激。

Answer 1

字符串格式错误。我最终使用了 Entity Framework.

所以我后面的代码看起来像这样：


    using (myEntities myEntitiesContainer = new myEntities())
    {
    var alldata = myEntitiesContainer.myData(id).ToList();

    foreach (myData i in alldata)
    {
        if (alldata.IndexOf(i) == alldata.Count - 1)
        {
            sb.Append("['").Append(i.DateData.ToString("yyyy-MM-dd HH:mmtt")).Append("', ").Append(i.SomeData.ToString()).Append("]");
        }
        else
        {
            sb.Append("['").Append(i.DateData.ToString("yyyy-MM-dd HH:mmtt")).Append("', ").Append(i.SomeData.ToString()).Append("], ");
        }
    }
    myReturnString = sb.ToString();
    }

return 字符串：

[['2015-03-31 16:00PM', 30.00], ['2015-03-31 14:00PM', 40.00], ['2015-03-31 13:00PM', 50.00]]

Javascript 看起来像：

var renderGraph = function () {
var plot
    var line1 = 

    plot = $.jqplot('chart', [line1], {
        axes: {
            xaxis: {
                renderer: $.jqplot.DateAxisRenderer,
                tickOptions: { min: 0, formatString: '%b %#d' },
                tickInterval: '1 day'
            },
            yaxis: {
                tickOptions:{ formatString: '%d'}
            }
        },

        highlighter: {
            show: true,
            yvalues: 1,
            xvalues: 1,
            formatString: 'Date: %s Level: %s'
        },
        cursor: {
            show: false,
            tooltipLocation: 'sw'
        },
        legend: {
            show: false
        }
    });
}

带有变量数据和 JSON 数据的 jqplot 图表

jqplot chart with data from variable and data from JSON

javascript

jquery

json

jqplot