[解決済み] chartjsで開始値を "0 "に設定するには?
2022-05-08 18:44:28
質問
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);
}
解決方法は?
Chart.js 2.*では、スケールをゼロから開始するオプションが リニアスケールの設定オプション . これは数値データに使用されるもので、おそらくY軸の場合もそうであるはずです。だから、これを使う必要がある。
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
折れ線グラフのサンプルもあります
こちら
ここで、このオプションはY軸に使用されます。数値データがx軸にある場合は
xAxes
の代わりに
yAxes
. には配列(と複数形)が使われていることに注意してください。
yAxes
(または
xAxes
)、複数の軸を持つことができるかもしれないからです。
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン