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

Flotr2 time mode in quarters

本文关键字：季度 为单位 时间 模式 Flotr2      更新时间：2023-09-26

我正在使用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;
}
相关文章：