1. 程式人生 > >Chart.js Y軸數據以百分比展示

Chart.js Y軸數據以百分比展示

too 取值 java docs 調試 ocs 配置 。。 tip

新手一枚,解決的問題喜歡記錄,也許正好有人在網上迷茫的百度著。-0-

最近使用Chart.js做折線圖的報表展示,直接顯示整數啥的很好弄畢竟例子直接在哪裏可以用,百分比就沒辦法了。百度慢慢汲取營養,雖然總是幾篇文章復制粘貼,但還有有收獲,然後自己搗鼓半天總算是弄出來了。。。

首先參考: http://www.chartjs.org/docs/latest/ 引用js,學習基本等等。。。

然後數據什麽的就不說了直說怎麽展示,

技術分享圖片

在配置文件中yAxes>ticks>callback 中設置你需要在Y軸展示的數據格式。

label是你的數據,index是下表,labels數組,我這裏傳過來的是小數所以使用Math.floor取值然後加上"%"符號。

下面 tooltips 使用展示你鼠標懸浮顯示數據,對應著你上面的數據也需要做修改。。。。

備註:如果多條數據想使用同一個Y軸的話不要加 stacked: true

如果想看加上什麽效果,或者上面的設置都是什麽樣的,可以自己調試,畢竟自己看到數據就懂了

主要是學習,所以希望看到的有更好辦法的求指導。。。謝謝!

最後附上一張效果圖:

技術分享圖片

Chart.js Y軸數據以百分比展示