資訊專欄INFORMATION COLUMN
摘要：?jiǎn)栴}場(chǎng)景通過(guò)上圖我們可以發(fā)現(xiàn)，即使在中將設(shè)置成了，但是最終生成的圖表仍然以作為軸的最大值解決方案為了解決這個(gè)問(wèn)題，我們需要為同時(shí)添加刻度總數(shù)屬性這樣子就能看到正確的以作為軸最大值的結(jié)果了就目前的測(cè)試結(jié)果而言，所設(shè)置的最大值要能夠被刻度線劃分
問(wèn)題場(chǎng)景
$(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]
}]
});
});
通過(guò)上圖我們可以發(fā)現(xiàn)，即使在 yAxis 中將 max 設(shè)置成了350，但是最終生成的圖表仍然以400作為y軸的最大值
解決方案為了解決這個(gè)問(wèn)題，我們需要為 yAxis 同時(shí)添加 tickAmount(刻度總數(shù)) 屬性
$(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軸最大值的結(jié)果了
就目前的測(cè)試結(jié)果而言，max 所設(shè)置的最大值要能夠被刻度線劃分出來(lái)的間隔數(shù)以特定的值整除
以上面的例子而言 tickAmount 設(shè)置為8，劃分出了7個(gè)格子，350 / 7 = 50 ，可以正確的顯示
在其他例子的測(cè)試中，整除成70或者90，也遇到過(guò)失效的情況
所以還是需要根據(jù)具體的 max 值來(lái)調(diào)整 tickAmount 的設(shè)置
解決方案2還可以使用 tickPositioner 屬性來(lái)手動(dòng)設(shè)置坐標(biāo)軸刻度
$(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]
}]
});
});
你也可以使用函數(shù)自動(dòng)計(jì)算出合適的間隙
$(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]
}],
});
});
最后一個(gè) 350 為了與上方保持一致 push 進(jìn)去的，使用時(shí)根據(jù)實(shí)際情況調(diào)整計(jì)算函數(shù)即可
參考tickAmount API
tickPositioner API
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/52851.html
摘要：?jiǎn)栴}場(chǎng)景通過(guò)上圖我們可以發(fā)現(xiàn)，即使在中將設(shè)置成了，但是最終生成的圖表仍然以作為軸的最大值解決方案為了解決這個(gè)問(wèn)題，我們需要為同時(shí)添加刻度總數(shù)屬性這樣子就能看到正確的以作為軸最大值的結(jié)果了就目前的測(cè)試結(jié)果而言，所設(shè)置的最大值要能夠被刻度線劃分 問(wèn)題場(chǎng)景 showImg(https://segmentfault.com/img/bVbe6UL?w=848&h=447); $(fun...
摘要：?jiǎn)栴}場(chǎng)景通過(guò)上圖我們可以發(fā)現(xiàn)，即使在中將設(shè)置成了，但是最終生成的圖表仍然以作為軸的最大值解決方案為了解決這個(gè)問(wèn)題，我們需要為同時(shí)添加刻度總數(shù)屬性這樣子就能看到正確的以作為軸最大值的結(jié)果了就目前的測(cè)試結(jié)果而言，所設(shè)置的最大值要能夠被刻度線劃分 問(wèn)題場(chǎng)景 showImg(https://segmentfault.com/img/bVbe6UL?w=848&h=447); $(fun...
摘要：?jiǎn)栴}一個(gè)折線圖中有多條折線。通過(guò)設(shè)置為與后，對(duì)軸進(jìn)行復(fù)用，并每次只展示一條折線，這樣能夠較好的展示每個(gè)折線的變化趨勢(shì)與大致范圍，不過(guò)一次看不了多個(gè)折線的參考文章文檔配置項(xiàng)文檔折線圖多條折線的時(shí)候怎么控制每次只能限制條 問(wèn)題 一個(gè)折線圖中有多條折線。由于折線之間數(shù)值范圍相差較大（折線A范圍[0-50]，折線B范圍[10000-20000]……），如果用單Y軸來(lái)表示，折線的變化趨勢(shì)不明顯。...
摘要：網(wǎng)址安裝依賴引入依賴注入依賴實(shí)例哈哈哈一月二月三月四月五月六月七月八月九月十月十一月十二月溫度東京紐約柏林倫敦結(jié)果基本組成 網(wǎng)址 https://segmentfault.com/q/10...https://www.hcharts.cn/demo/h...https://github.com/pablojim/h... 安裝依賴 npm install highcharts-ng -...
閱讀 723·2021-10-14 09:42
閱讀 1976·2021-09-22 15:04
閱讀 1585·2019-08-30 12:44
閱讀 2146·2019-08-29 13:29
閱讀 2738·2019-08-29 12:51
閱讀 556·2019-08-26 18:18
閱讀 707·2019-08-26 13:43
閱讀 2818·2019-08-26 13:38
