我试图在Flot中绘制一些应该在时间模式下显示x-axis
的数据。 flot引用API并不表示minTickSize
可以接受“周”作为一个单元,因此我将该单位指定为“day”,其值为7:
minTickSize: [7, "day"],
这显示了一些刻度线相隔7天的刻度尺寸,并且在某些刻度线中相隔约8-9天。以下示例显示了不一致的刻度:http://jsfiddle.net/UEePE/583/
我知道图表也没有绘制我期待的简单线条。仍在努力找出原因。当我从xaxis中删除除mode:time之外的所有选项时,它似乎可以工作,但是当我添加其他选项时却没有。
如果让Flot在7天/ 1周之间添加刻度以及如何使图表在这种情况下实际绘制一条线,将会有任何帮助。
谢谢!
答案 0 :(得分:6)
首先。 Flot的数据参数是一个系列数组。每个系列都是一个点数组,每个点都是两个值的数组:x和y。所以你的数据应该是这样的:
var data = [ [
[1301634000000, 315.71], //Apr 1, 2011
[1302238800000, 209.21], //Apr 8, 2011
[1302843600000, 420.36], //Apr 15
[1303448400000, 189.86], //4/22
[1304053200000, 314.93], //4/29
[1304658000000, 279.71], //5/6
[1305262800000, 313.34], //5/13
[1305867600000, 114.67], //5/20
[1306472400000, 315.58] //5/27
] ];
Next Flot将您的[7,“day”]转换为[0.25,“month”]。 minTickSize只有很多值,它会接受(在源代码中搜索“spec”)。
这意味着您必须自己提供刻度值。简单的方法是从第一个数据系列中获取x轴值,创建一个ticks数组,并将其传递给xaxis哈希:
var ticks = [];
for (var i = 0; i < data[0].length; i++) {
ticks.push(data[0][i][0]); //corrected the missing closing bracket here..
}
然后
$.plot($("#placeholder"), data, {
xaxis: {
mode: "time",
ticks: ticks,
timeformat: "%m/%d",
min: (new Date(2011, 2, 31)).getTime(),
max: (new Date(2011, 4, 31)).getTime()
},
..etc..