jQuery Flot：缩放时更改xaxis

Question

有没有办法让x轴从显示小时切换到例如周日，月......缩小时？

目前我的x轴配置如下：

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

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

以下是图表缩小时的一个示例（显然我需要远程调整一些数据点以使其看起来更平滑..）

Answer 1

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

要根据范围获得格式更新，即在放大时显示HMS，在缩小时显示YMD，则比较复杂。您需要监听'plotzoom'事件并检查范围以查看格式是否需要更改。如果是这样，使用getOptions（）来检索和更新图的选项，然后调用setupGrid＆amp;绘制使用新格式重绘绘图。

Answer 2

我通过为X轴制作自定义tickFormatter来解决这个问题：

在您的xaxis选项中：

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");
}

我希望这会有所帮助：）