1. 程式人生 > >chart.js外掛生成折線圖時資料普遍較大時Y軸資料不從0開始的解決辦法

chart.js外掛生成折線圖時資料普遍較大時Y軸資料不從0開始的解決辦法

預設情況下如下圖

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開始