Chart.jsでグラフを描画する（棒グラフ）

2018/02/25

前回、Chart.jsを使って折れ線グラフを描きました。

グラフ描画ライブラリのChart.jsがかなり使いやすく簡単に描画できたのでメモ。今までいろいろグラフ描画ライブラリを試してきたけど（jQuery系とかGoogleとか）、これが一番きれいに描画できるし使い勝手もいいんじゃないかなと思います。今回は折れ線グラフの描き方についてメモしておきます。HTMLの中にグラフ描画エリアを設置するChart.jsの読み込みは以下のとおりです。GitHubサイトからダウンロードもできます。<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script&...

今回は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]

Chart.jsでグラフを描画する（棒グラフ）

共有:

関連