JQuery Flot X轴标签格式

Question

我在日期格式中没有更多的 x 轴标签的刻度。现在我需要根据动态生成的刻度数将其格式化为年或月或周。例如，如果我有日期 2011-10-01、2011-10-02、......2015-10-05，那么我需要将 x 轴标签格式化为 2011、2012、2013、...... 2015.当我制作折线图时，当我单击圆圈时，它应该在工具提示中显示实际值。即 2011-01-10: 200。现在 x 轴标签相互合并。

我尝试创建只显示年份的刻度，但在工具提示中它没有得到反映。即空。

请分享我如何以良好的方式制作它的想法。

Answer 1

您可以根据您的数据使用如下函数自定义时间格式和 minTickSize 的选项：

var diff = data[data.length - 1][0] - data[0][0];
var oneDay = 24 * 60 * 60 * 1000;

if (diff < 31 * oneDay) {
    options.xaxis.minTickSize = [1, 'day'];
    options.xaxis.timeformat = '%Y-%m-%d';
} else if (diff < 24 * 31 * oneDay) {
    options.xaxis.minTickSize = [1, 'month'];
    options.xaxis.timeformat = '%Y-%m';
} else {
    options.xaxis.minTickSize = [1, 'year'];
    options.xaxis.timeformat = '%Y';
}

查看此 fiddle 以获得完整示例。

JQuery Flot X轴标签格式

JQuery Flot X axis label formatting

jquery

flot