Flot中每周图表数据的日期显示不正确

时间:2011-07-05 18:41:34

标签: jquery flot

我试图在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周之间添加刻度以及如何使图表在这种情况下实际绘制一条线,将会有任何帮助。

谢谢!

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..