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

WrBug 發布于2019-08-29 16:21 / 1930人閱讀

摘要：問題場景通過上圖我們可以發現，即使在中將設置成了，但是最終生成的圖表仍然以作為軸的最大值解決方案為了解決這個問題，我們需要為同時添加刻度總數屬性這樣子就能看到正確的以作為軸最大值的結果了就目前的測試結果而言，所設置的最大值要能夠被刻度線劃分

問題場景

    $(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

還可以使用 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]
            }]
        });
    });

你也可以使用函數自動計算出合適的間隙

    $(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

GPU云服務器云服務器解決問題的方法云計算解決的問題短視頻問題的解決措施數據分析解決的問題

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113693.html

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

摘要：問題場景通過上圖我們可以發現，即使在中將設置成了，但是最終生成的圖表仍然以作為軸的最大值解決方案為了解決這個問題，我們需要為同時添加刻度總數屬性這樣子就能看到正確的以作為軸最大值的結果了就目前的測試結果而言，所設置的最大值要能夠被刻度線劃分問題場景 showImg(https://segmentfault.com/img/bVbe6UL?w=848&h=447); $(fun...

Cciradih 2019-08-23 10:53 評論0 收藏0
解決 Highcharts 中 yAxis 的 max 設置無效的問題

摘要：問題場景通過上圖我們可以發現，即使在中將設置成了，但是最終生成的圖表仍然以作為軸的最大值解決方案為了解決這個問題，我們需要為同時添加刻度總數屬性這樣子就能看到正確的以作為軸最大值的結果了就目前的測試結果而言，所設置的最大值要能夠被刻度線劃分問題場景 showImg(https://segmentfault.com/img/bVbe6UL?w=848&h=447); $(fun...

curlyCheng 2019-08-02 11:13 評論0 收藏0
ECharts折線圖多個折線每次只顯示一條

摘要：問題一個折線圖中有多條折線。通過設置為與后，對軸進行復用，并每次只展示一條折線，這樣能夠較好的展示每個折線的變化趨勢與大致范圍，不過一次看不了多個折線的參考文章文檔配置項文檔折線圖多條折線的時候怎么控制每次只能限制條問題一個折線圖中有多條折線。由于折線之間數值范圍相差較大（折線A范圍[0-50]，折線B范圍[10000-20000]……），如果用單Y軸來表示，折線的變化趨勢不明顯。...

_DangJin 2019-08-21 16:46 評論0 收藏0
highcharts 在angular中的使用

摘要：網址安裝依賴引入依賴注入依賴實例哈哈哈一月二月三月四月五月六月七月八月九月十月十一月十二月溫度東京紐約柏林倫敦結果基本組成網址 https://segmentfault.com/q/10...https://www.hcharts.cn/demo/h...https://github.com/pablojim/h... 安裝依賴 npm install highcharts-ng -...

izhuhaodev 2019-08-22 11:11 評論0 收藏0