chart.js外掛生成折線圖時資料普遍較大時Y軸資料不從0開始的解決辦法
阿新 • • 發佈:2019-02-08
預設情況下如下圖
Y軸並不是從0開始,這樣折現圖的幅度會很大,不是正常的幅度,解決辦法如下,
示例程式碼:
window.onload = function () { var ctx = document.getElementById("canvas").getContext("2d"); window.myLine = new Chart(ctx).Line(lineChartData, { scaleOverride :true , //是否用硬編碼重寫y軸網格線 scaleSteps : 15, //y軸刻度的個數 scaleStepWidth : 300, //y軸每個刻度的寬度 scaleStartValue : 0, //y軸的起始值 pointDot : true, //是否顯示點 pointDotRadius : 5, //點的半徑 pointDotStrokeWidth : 1,//點的線寬 datasetStrokeWidth : 3, //資料線的線寬 animation : true, //是否有動畫效果 animationSteps : 60 //動畫的步數 } ); }
核心程式碼:
scaleOverride :true , //是否用硬編碼重寫y軸網格線 scaleSteps : 15, //y軸刻度的個數 scaleStepWidth : 300, //y軸每個刻度的寬度 scaleStartValue : 0, //y軸的起始值
這樣就會得到下面的效果,Y軸從0開始