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

Question

我试图在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周分开以及如何使图表实际绘制一条线在这种情况下.

谢谢!

Answer 1

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