Chart.jsでグラフを描画する(棒グラフ)
前回、Chart.jsを使って折れ線グラフを描きました。
今回はChart.jsを使った棒グラフの描き方です。
[ad#top-1]
前回の折れ線グラフのコードに3箇所だけ修正しただけです。
type: 'line',
を、type: 'bar',
にするのと、折れ線グラフではライン色を指定していたのですが、棒グラフの場合は面の色を指定します。backgroundColor: 'rgb(255, 132, 132)',
。
var ctx = document.getElementById("ChartDemo").getContext('2d'); var ChartDemo = new Chart(ctx, { type: 'bar', //折れ線の[line]を[bar]に変更 data: { labels: ["Item1", "Item2", "Item3", "Item4", "Item5", "Item6", "Item7"], datasets: [ { label: "Chart-1", lineTension: 0, fill: false, backgroundColor: 'rgb(255, 132, 132)', //棒ブラフは背景を設定する data: [20, 26, 12, 43, 33, 21, 29], }, { label: "Chart-2", lineTension: 0, fill: false, backgroundColor: 'rgb(132, 132, 255)', //棒ブラフは背景を設定する data: [28, 22, 32, 13, 33, 41, 19], }, ] }, options: { responsive: false, scales: { xAxes: [{ ticks: { fontSize: 14,}, }], yAxes: [{ ticks: { fontSize: 18,}, }], }, } });
こちらがブラウザ上で表示したものです。
[ad#ad-1]
スポンサーリンク