我正在使用Flotr2并取得了巨大的成功。现在我们用时间模式实现了它。这就像一个魅力。但现在客户只想显示季度(即 20013-1、2013-2)。
现在,Flotr2 会自动缩放数据以适合图形。但是因为没有一个季度是相同的大小,所以失败了。
所以我的问题是,是否可以在 Flotr2(在 x 轴上)中添加四分之一。如果是这样,在宇宙中是否有我没有找到的例子?
最好的解决方案是使用 xaxis 刻度选项,并结合刻度格式化程序:
xaxis: {
ticks : [],
tickFormatter: function () {}
}
编写一个函数来返回一个季度开始日期数组,或范围中的位数等。 它们应该在毫秒中。
然后,格式化程序可以输出您要查找的日期格式,如上所述。
它不是 100% 令人满意,但它"有效"
对于折线图,我删除了时间模式并添加了可以更改noTicks: 12
,但由于时间的性质(主要是月份),没有相同的大小,这变得非常需要,因此 xaxis 标签工作正常。
接下来,我在轴上添加了一个tickFormatter
x轴设置:
xaxis:{
noTicks: 15,
tickFormatter: function (x) {
var d = new Date(parseInt(x));
var month = d.getMonth();
if (parseInt(month / 3) == month / 3) {
return msToYearQuarter(parseInt(x));
}
return '';
}
},
为了将毫秒转换为"年季度",我做了一个简单的函数
function msToYearQuarter(ms) {
var date = new Date(ms);
var quarter = (date.getMonth() / 3) + 1;
var year = date.getFullYear();
return year + '-' + quarter;
}