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


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

 

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

 

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

然后數據什么的就不說了直說怎么展示,

 

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

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

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

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

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

 

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

 

最后附上一張效果圖:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM