解決 Highcharts 中 yAxis 的 max 設置無效的問題

問題場景

$(function () {
        Highcharts.chart('container', {
            title: {
                text: 'line'
            },
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },
            yAxis: {
                max: 350,
            },
            series: [{
                data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 250.4, 294.1, 95.6, 54.4]
            }]
        });
    });

• 經過上圖咱們能夠發現，即便在 yAxis 中將 max 設置成了350，可是最終生成的圖表仍然以400做爲y軸的最大值

解決方案

• 爲了解決這個問題，咱們須要爲 yAxis 同時添加 tickAmount(刻度總數) 屬性

$(function () {
        Highcharts.chart('container', {
            title: {
                text: 'line'
            },
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },
            yAxis: {
                max: 350,
                tickAmount:8,
            },
            series: [{
                data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 250.4, 294.1, 95.6, 54.4]
            }]
        });
    });

• 這樣子就能看到正確的以350做爲y軸最大值的結果了

• 就目前的測試結果而言，max 所設置的最大值要可以被刻度線劃分出來的間隔數以特定的值整除

  • 以上面的例子而言 tickAmount 設置爲8，劃分出了7個格子，350 / 7 = 50 ，能夠正確的顯示
  • 在其餘例子的測試中，整除成70或者90，也遇到過失效的狀況
  • 因此仍是須要根據具體的 max 值來調整 tickAmount 的設置

解決方案2

1. 還能夠使用 tickPositioner 屬性來手動設置座標軸刻度

$(function () {
        Highcharts.chart('container', {
            title: {
                text: 'line'
            },
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },
            yAxis: {
                tickPositioner: function () {
                    var positions = [0,100,200,300,350];
                    return positions;
                }
            },
            series: [{
                data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 250.4, 294.1, 95.6, 54.4]
            }]
        });
    });

1. 你也能夠使用函數自動計算出合適的間隙

$(function () {
        $('#container').highcharts({
            title: {
                text: 'line'
            },
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },
            yAxis: {
                tickPositioner: function () {
                    var positions = [],
                        tick = Math.floor(this.dataMin),
                        increment = Math.ceil((this.dataMax - this.dataMin) / 6);
                    for (tick; tick - increment <= this.dataMax; tick += increment) {
                        positions.push(tick);
                    }
                    positions.push(350);
                    return positions;
                }
            },
            series: [{
                data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 250.4, 294.1, 95.6, 54.4]
            }],
        });
    });

• 最後一個 350 爲了與上方保持一致 push 進去的，使用時根據實際狀況調整計算函數便可

參考

tickAmount API
tickPositioner API