Question

我试图通过变量将数据加载到jqplot图表中，但它只显示第一个值。我迷失了为什么这样做。

Result

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格式数据，并使用图表的第一个值和轴的第二个值。

数据：

[[＆＃34; 50.00＆＃34;，＆＃34; 3/18/2015 2:00:00 PM＆＃34;]，[＆＃34; 37.00＆＃34;，＆＃34; 3/12/2015 3:42:44 PM＆＃34;]，[＆＃34; 35.00＆＃34;，＆＃34; 3/11/2015 3:42:44 PM＆＃34;]]

非常感谢使用此类数据的任何建议或样本链接。

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();
    }

返回字符串：

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

jqplot图表，包含来自变量的数据和来自JSON的数据

1 个答案: