浮云間
2022-12-22 15:16:01
我正在使用 chart.js 模塊來(lái)繪制一些數(shù)據(jù),并使用 chartjs-plugin-zoom 來(lái)啟用縮放和平移,但是盡管縮放有效,但 x 軸上的標(biāo)簽不會(huì)因任何原因而改變。我見過(guò)類似的問(wèn)題,但它們都處理時(shí)間序列數(shù)據(jù),因此建議沒有幫助。這是縮小的情節(jié):這是放大的:需要注意的關(guān)鍵是 y 軸上的標(biāo)簽發(fā)生了變化,但 x 軸標(biāo)簽沒有發(fā)生變化。這是圖表的相關(guān)配置變量:const config3 = { type: 'line', data: { labels: [I ran out of chars but this is just a very long list of numbers in this format: 1,2,3,4,5], datasets: [ { label: "", backgroundColor: '#'+Math.floor(Math.random()*16777215).toString(16), borderColor: '#0071BC', data: [I ran out of chars but this is just a very long list of numbers in this format: 1,2,3,4,5], fill: false, borderWidth: 1, }, ], }, options: { responsive: true, title: { display: true, text: 'Peak: -1.2188' }, tooltips: { mode: 'index', intersect: false, },如果需要,我可以提供更多代碼,但我想錯(cuò)誤可能包含在配置中。我試著改變zoom.mode是'x'但那沒有用。
1 回答

心有法竹
TA貢獻(xiàn)1866條經(jīng)驗(yàn) 獲得超5個(gè)贊
萬(wàn)一其他人遇到這個(gè)問(wèn)題,我想出了一個(gè)非常不直觀的解決方案。
第一個(gè)問(wèn)題是標(biāo)簽在 chart.js 中的處理方式,因?yàn)樗鼈儽灰暈轭悇e而不是我認(rèn)為的 x 數(shù)據(jù)。因此,首先您必須以這種格式將數(shù)據(jù)作為坐標(biāo)傳遞:(如本文檔所示:https ://www.chartjs.org/docs/latest/charts/line.html )
data: [{
x: 10,
y: 20
}, {
x: 15,
y: 10
}]
并刪除標(biāo)簽變量。
但是,盡管文檔有說(shuō)明,但這不適用于折線圖。為了解決這個(gè)問(wèn)題,您可以設(shè)置:type: 'scatter'并在數(shù)據(jù)集內(nèi)寫入showLine: true 這將生成一個(gè)線圖,其中 x 標(biāo)簽是自動(dòng)生成的,并且縮放效果很好。
我還認(rèn)為有一個(gè)性能提升,這是一個(gè)很好的獎(jiǎng)勵(lì)。
添加回答
舉報(bào)
0/150
提交
取消