浮点:以日期/时间作为 x 轴的图形未正确绘制

Flot: Graph with Date/Time as x axis not plotting correctly

本文关键字:图形 绘制 日期 时间 浮点      更新时间:2023-09-26

我试图随着时间的推移显示值,但无论我尝试绘制什么数据,图表上都没有出现任何内容。JsFiddle 在这里。

请参阅下面的代码。我做错了什么?

.HTML:

<div id="theGraph"></div>

.CSS:

#theGraph{
    height:300px;
    width:500px;
}

Javascript:

var graphData = [
    [new Date("2015-03-13T08:00").getTime(), 2],
    [new Date("2015-03-15T00:00").getTime(), 3]
];
var options = {
    series: {
        lines: {
            show: true,
            lineWidth: 2
        },
        points: {
            show: true
        }
    },
    lines: {
        show: true
    },
    points: {
        show: true
    },
    yaxis: {
        min: 0,
        max: 5
    },
    xaxis: {
        mode: 'time',
        minTickSize: [1, 'hour'],
        min: new Date("2015-03-13T00:00").getTime(), 
        max: new Date("2015-03-15T08:00").getTime(), 
        timeformat: '%m/%d %H:%M'
    }
};
$.plot($('#theGraph'), graphData, options);

$.plot 方法获取要绘制图形的div 的占位符/ID。 $.plot('#id',.....) 也做同样的事情。

而且你的代码中只有一个问题 $.plot()。参数 'graphData' 应该在 [] 大括号中,因为 $.plot 需要序列数据数组。

修改后的代码:

$.plot($('#theGraph'), [graphData], options);

您可以提及可能的数据系列以在 flot 中绘制多条线。

 var d1 = [], d2 =[], d3 =[];
 $.plot($('#theGraph'), [d1,d2,d3], options);