亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Chartjs-plugin-zoom 插件不改變 x 軸標簽

Chartjs-plugin-zoom 插件不改變 x 軸標簽

浮云間 2022-12-22 15:16:01
我正在使用 chart.js 模塊來繪制一些數據,并使用 chartjs-plugin-zoom 來啟用縮放和平移,但是盡管縮放有效,但 x 軸上的標簽不會因任何原因而改變。我見過類似的問題,但它們都處理時間序列數據,因此建議沒有幫助。這是縮小的情節:這是放大的:需要注意的關鍵是 y 軸上的標簽發生了變化,但 x 軸標簽沒有發生變化。這是圖表的相關配置變量: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,                            },如果需要,我可以提供更多代碼,但我想錯誤可能包含在配置中。我試著改變zoom.mode是'x'但那沒有用。
查看完整描述

1 回答

?
心有法竹

TA貢獻1866條經驗 獲得超5個贊

萬一其他人遇到這個問題,我想出了一個非常不直觀的解決方案。


第一個問題是標簽在 chart.js 中的處理方式,因為它們被視為類別而不是我認為的 x 數據。因此,首先您必須以這種格式將數據作為坐標傳遞:(如本文檔所示:https ://www.chartjs.org/docs/latest/charts/line.html )


data: [{

    x: 10,

    y: 20

}, {

    x: 15,

    y: 10

}]

并刪除標簽變量。


但是,盡管文檔有說明,但這不適用于折線圖。為了解決這個問題,您可以設置:type: 'scatter'并在數據集內寫入showLine: true 這將生成一個線圖,其中 x 標簽是自動生成的,并且縮放效果很好。


我還認為有一個性能提升,這是一個很好的獎勵。


查看完整回答
反對 回復 2022-12-22
  • 1 回答
  • 0 關注
  • 183 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號