季度Flotr2时间模式

Question

我正在使用Flotr2并取得了巨大的成功。现在我们用时间模式来实现它。就像一种魅力。但现在客户只想显示季度(即20013-1,2013年-2)。

现在，Flotr2，自动缩放数据，以适应图表。但是，因为没有一个地方是相同的大小，这是失败的。

所以我的问题是，是否可以在Flotr2 (在x轴上)增加四分之一。如果是这样的话，在宇宙中有没有我找不到的例子？

Answer 1

最好的解决方案是使用xaxis选项，并结合滴答格式化程序：

xaxis: {
  ticks : [],
  tickFormatter: function () {}
}

编写一个函数来返回一个季度开始日期的数组，或中间值，等等。它们应该在ms里。

然后，格式化程序可以输出您正在寻找的日期格式，如上文所述。

Answer 2

这不是百分之百的满意，但它“有效”。

对于线条图，我删除了时间模式并添加了noTicks: 12，这可以更改，但是由于时间的性质(通常是几个月)，没有相同的大小，这变得非常必要，因此xaxis标签工作得很好。

接下来，我向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;
}