Flotr2 时间模式(以季度为单位)



我正在使用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;
}

相关内容

  • 没有找到相关文章

最新更新