javascript - 有没有一种可靠的方法可以让 1 个月的自动生成高图表的刻度间隔？

Question

高图表有一种非常好的方法来为图表生成日期。

但是，由于您需要指定一个 tickInterval 来为每个点生成日期，因此间隔 1 个月非常困难，因为它们是不规则的。

推荐的方法是使用等于 31 天的滴答间隔，但有许多用例会跳过 2 月。

有没有一种可靠的方法可以让 1 个月的自动生成高图表的刻度间隔？

Answer 1

Seems like the example provided for irregular interval data would solve your problem: Highcharts Demo - Irregular Time Interval

The relevant code, from that example, for x-axis labeling is:

xAxis: {
   type: 'datetime',
   dateTimeLabelFormats: { // don't display the dummy year
      month: '%e. %b',
      year: '%b'
   }
},

Answer 2

xAxis: {
    type: 'datetime',
    tickPositioner: function(min, max) {
        var ticks = [];
        var maxDate = new Date(max);
        var tickDate = new Date(min);
        while (tickDate <= maxDate) {
            ticks.push(tickDate.getTime());
            tickDate.setMonth(tickDate.getMonth() + 1);
        }
        ticks.info = {
            unitName: "month",
            higherRanks: {}
        };
        return ticks;
    },
    labels: {
        rotation: -45,
        align: 'right',
        x: 5
    }
}

Answer 3

这很粗略，但它应该给你基本的想法。相关小提琴在这里。

xAxis: {
    minPadding: 0,
    // Ticks in binary positions
    tickPositioner: function(min, max) {

        var pos,
            tickPositions = [],
            tickStart = 0;

        var tick = 0;
        for (pos = 1; pos <= 12; pos++) {
            tick += new Date(2013, pos, 0).getDate();
            tickPositions.push(tick);
        }
        return tickPositions;

    },
    // Only show labels where there is room for them
    labels: {
        formatter: function() {
            var tick = 0;
            for (pos = 1; pos <= 12; pos++) {
                 if (tick == this.value) 
                     return monthNames[pos - 1];
                 tick += new Date(2013, pos, 0).getDate();
            }
        }
    }

属性 'tickPositioner' 允许您设置生成刻度的自定义函数，标签下的属性 'formatter' 让您决定哪些刻度应该生成标签，以及应该是什么。在这两者之间，您将能够生成几个月。

需要注意的几点：

• 我对 2013 年进行了硬编码，因为我不确定您的确切用例是什么；您必须考虑具有不同天数的不同年份以及数据属于哪一年。
• 我的代码中可能很容易出现与标签设置日期相关的一个错误，我很快将它们放在一起只是为了演示一般概念。
• 可以删除大量重复项以使此示例更加干燥。