jQuery Flot：缩放时更改x轴

有没有一种方法可以让x轴从显示小时切换到例如星期几，几个月..当缩小？jQuery Flot：缩放时更改x轴

目前我的x轴被配置成这样：

xaxis: { 
    mode: "time", 
    minTickSize: [1, "second"], 
    timeformat: "%H:%M:%S", 
}

我的默认图形看起来不错，但是当我缩小足够的时间，对x轴的标签只显示“00:00”。我如何更改timeformat以便日期也包含在内？例如。 Tue 27 00:00或类似的。

下面是当图被缩小了很多的例子（显然我需要远程一些数据点，使它看起来更顺畅..）

Example

来源

2013-02-27 DavidS

您可以使用标准的符添加日期，如％Y-％m-％d。完整列表可以在Time Series Data部分的API文档中找到。

要根据范围得到更新的格式，即当放大时显示HMS但缩小时显示YMD更加棘手。您需要听取'plotzoom'事件并检查范围以查看格式是否需要更改。如果是这样，请使用getOptions（）检索并更新图的选项，然后调用setupGrid &绘图以使用新格式重绘图。

来源

2013-02-27 14:12:58 DNS

于是我只检查说'rangeStart'和'rangeEnd'之间的区别？关于删除数据点的部分：我们可以轻松做到这一点吗？我希望重点在那里，而不仅仅是一个圆圈/点，因为就你看到的图像而言，它看起来不太好。非常感谢您的回复！ – DavidS 2013-02-27 15:54:54

我做了你所说的;如果'xaxis.min'和'max'之间的差异大于'3600000'，我称'getOptions'并将'xaxis.timeformat'修改为'％Y-％m-％d'。然后我调用了'setupGrid（）'和'draw（）'，但没有更改标签。 – DavidS 2013-02-28 12:55:21

我解决了这个通过制造定制tickFormatter为X轴：

在你的x轴选项的说：

xaxis: { 
    mode: "time", 
    tickFormatter: customXAxisFormatter, 
    ... 
}

然后你customXAxisFormatter可能是如。：

function customXAxisFormatter(val, axis) 
{ 
    var d = new Date(val); 

    // If time difference is more than 24 hours 
    if ((axis.max - axis.min) > (24*3600*1000)) 
     return d.strftime("%a<br>%H:%M"); 
    else 
     return d.strftime("%H:%M"); 
}

我希望这有助于:)

来源

2014-11-13 13:47:50 jhappone

jQuery Flot：缩放时更改x轴

回答

相关问题