如何显示x轴Highcharts的第一个和最后一个标签

时间:2019-06-12 09:27:12

标签: javascript highcharts

我尝试了其他答案的解决方案,但无法获得所需的结果..请帮助我。

我想在高图中显示第一个x轴标签和最后一个。

我从这个答案(Force Highcharts to show last x-axis label)中尝试了{endOnTick:true,showLastLabel:true},但是它只在最后一个数字上显示..而不是实际的最后一个标签。

这是我的x轴选项

xAxis: {
    type: 'Month',
    // tickInterval is 5 this time
    tickInterval: <?php echo number_format($num_results/5, 0);?>,
    endOnTick: true, // it shows "25" at the end of the label. not "2019-06"
    showLastLabel: true, // Default is true though..
    labels: {
        autoRotation: 0
    },
    //I get those categories from server
    //so it could be different every time
    //but this time I just write the result of it.
    categories:  ["2017-07","2017-08","2017-09","2017-10","2017-11","2017-12","2018-01","2018-02","2018-03","2018-04","2018-05","2018-06","2018-07","2018-08","2018-09","2018-10","2018-11","2018-12","2019-01","2019-02","2019-03","2019-04","2019-05","2019-06"]
}

预期的x轴标签为 “ 2017-07 2017-12 2018-05 2018-10 2019-03 2019-06”

实际结果是 “ 2017-07 2017-12 2018-05 2018-10 2019-03 25”

2 个答案:

答案 0 :(得分:1)

啊,我用tickPositioner解决了!

xAxis: {
    type: 'Linear',
    tickmarkPlacement: 'on',
    tickPositioner: function() {
        var positions = [],
            ext = this.getExtremes(),
            xMax = Math.round(ext.max),
            xMin = Math.round(ext.min);

        for (var i = xMin; i < xMax; i++) {
            if (i % <?php echo number_format($num_results/3,0);?> == 0) {
                positions.push(i);
            }
        }
        positions.push(xMax);
        return positions;
    },
    labels: {
        autoRotation: 0,
    },
    categories:  ["2017-07","2017-08","2017-09","2017-10","2017-11","2017-12","2018-01","2018-02","2018-03","2018-04","2018-05","2018-06","2018-07","2018-08","2018-09","2018-10","2018-11","2018-12","2019-01","2019-02","2019-03","2019-04","2019-05","2019-06"]
}

答案 1 :(得分:0)

您缺少2个类别来显示2019-06

...
categories:  ["2017-07","2017-08","2017-09","2017-10","2017-11",
              "2017-12","2018-01","2018-02","2018-03","2018-04",
              "2018-05","2018-06","2018-07","2018-08","2018-09",
              "2018-10","2018-11","2018-12","2019-01","2019-02",
              "2019-03","2019-04","2019-05","2019-06","24th","the 25th"]
},

Fiddle