チャートの開始値を「0」に設定する方法


109

これが私のコードです。x軸とy軸の両方のスケールで初期値を「0」に設定する必要があります。最新バージョンのスケールオプションを試しました。

graphOptions = {               
            ///Boolean - Whether grid lines are shown across the chart
            scaleShowGridLines: false,    
            tooltipTitleTemplate: "<%= label%>",
            //String - Colour of the grid lines
            scaleGridLineColor: "rgba(0,0,0,.05)",
            //Number - Width of the grid lines
            scaleGridLineWidth: 1,
            //Boolean - Whether to show horizontal lines (except X axis)
            scaleShowHorizontalLines: true,
            //Boolean - Whether to show vertical lines (except Y axis)
            scaleShowVerticalLines: true,
            //Boolean - Whether the line is curved between points
            bezierCurve: true,
            //Number - Tension of the bezier curve between points
            bezierCurveTension: 0.4,
            //Boolean - Whether to show a dot for each point
            pointDot: true,
            //Number - Radius of each point dot in pixels
            pointDotRadius: 4,
            //Number - Pixel width of point dot stroke
            pointDotStrokeWidth: 1,               
            pointHitDetectionRadius: 20,               
            datasetStroke: true,
            datasetStrokeWidth: 2,
            datasetFill: true,               
            legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokeColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
        };
        var LineChart = new Chart(ctx).Line(graphData, graphOptions);
   }     

回答:


298

Chart.js 2. *の場合、ゼロから開始するスケールのオプションは、線形スケールの構成オプションの下にリストされます。これは数値データに使用されます。これはおそらくy軸の場合です。したがって、これを使用する必要があります:

options: {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true
            }
        }]
    }
}

サンプルの折れ線グラフもここで利用できます。このオプションはy軸に使用されます。数値データがX軸上にある場合は、xAxesではなくを使用してくださいyAxesyAxes(またはxAxes)には配列(および複数)が使用されることに注意してください。


@SuganthanRajどういたしまして!Chart.js 2.0のドキュメントを参照してください。1.0バージョンから多くの変更があり、ほとんどのオンライン例は1.0バージョンに適用されます。;)
xnakos

@SuganthanRajたとえばscaleShowVerticalLines、2.0では無効です。または、ツールチップテンプレート。一般に、オプションは2.0の階層的アプローチに従います。
xnakos


1

このオプションを追加してください:

//Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
scaleBeginAtZero : true,

(参照:Chart.js

注:私が投稿した元の解決策はHighcharts用でした。Highchartsを使用していない場合は、混乱を避けるためにタグを削除してください。


2
動いていない 。chartjs v2.1の最新バージョンを使用しています
Suganthan Raj

@wmash定義済みの値からチャートを開始する必要があります。これを行う方法を知っていますか?このオプションをtrueとfalseの両方に設定しようとしましたが、機能しません。
Michael.D 2018年

これは正しくないため、削除する必要があります。beginAtZero: true必要なもの
トリプル
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.