1. 程式人生 > >網頁圖表 開源工具Chart.js中關於Y軸資料從浮點數修改至整數展示的方法

網頁圖表 開源工具Chart.js中關於Y軸資料從浮點數修改至整數展示的方法

專案需求:最近一個專案中的一個需求是在web端展示後臺處理的二維資料

所用資源:chart.js,該專案是一個開源的js工具,大家可以展示諸如二維曲線圖(Line Chart)、柱狀圖(Bar Chart)、雷達圖或蛛網圖(Redar Chart)等比較友好易於理解的圖形

有興趣的同學可以下載瀏覽

所遇到的問題:在曲線圖中Y軸資料展示會遇到浮點數的問題,但是對於人數統計這類資料展示就會遇到人數怎麼會有小數的問題

PS:感謝stackoverflow!!!

img5

下面是具體步驟

1,在http://www.chartjs.org/官網中點選"Download"會跳轉至該專案的GitHub主頁,點選右側的“Download ZIP”下載其原始碼檔案

2,解壓下載好的檔案包開啟其中的樣例資料夾中的line.html檔案“../samples/line.html”

3,直接在網頁中執行你會看見如上圖的情況Y軸是浮點數表示


在程式碼中datasets : [...]後新增config : [...](注意datasets : [...]和config : [...]之間用逗號相隔),注意關鍵之處來了,這個config:[...]中間的內容就是你要傳遞給chart.js

檔案中的相關配置項,在chart.js檔案中


img4

scaleOverride : false,
scaleSteps : null,
scaleStepWidth : null,
scaleStartValue : null,

這幾行程式碼是控制Y軸顯示的關鍵,你可以做如下修改

在line.html的config : [...]中新增一些引數然後在chart.js中去利用這些引數控制圖示的顯示樣式,我就直接寫個例子給大家參考吧

line.html中js指令碼段程式碼如下圖

img2

chart.js段程式碼如下


img3

這樣問題就得到了簡單的解決

img1


有什麼問題或寫的不足之處還望大家諒解!