Question

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

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

建议的方法是使用等于31天的刻度间隔，但有许多用例会跳过2月。

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

Answer 1

似乎为不规则间隔数据提供的示例可以解决您的问题：Highcharts Demo - Irregular Time Interval

从该示例中，x轴标记的相关代码是：

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

Answer 2

这非常粗糙，但它应该给你基本的想法。 Relevant fiddle here。

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年进行了硬编码，因为我不确定您的具体用例是什么;您必须考虑具有不同天数和数据所属年份的不同年份。
我的代码中可能很容易出现一个与标签设置日期有关的错误，为了演示一般概念，我很快将它放在一起。
可以删除相当数量的重复，以使此示例更加干燥。

Answer 3

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
    }
}

是否有一种可靠的方法可以使用高图表获得1个月的自动生成蜱间隔？

3 个答案: