非IT企業に勤める中年サラリーマンのIT日記

非IT企業でしかもITとは全く関係ない部署にいる中年エンジニア。唯一の趣味がプログラミングという”自称”プログラマー。

Chart.jsでグラフを描画する(棒グラフ)

   

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

 

今回はChart.jsを使った棒グラフの描き方です。

広告

 

前回の折れ線グラフのコードに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,},
      }],
    },
  }
});
 

 

こちらがブラウザ上で表示したものです。

ガジェット系ブログもよろしく

すまたすログ

ガジェット系ブログです。主にChromebookの情報やMyマシンのASUS Flip C434TAのレビューなどを書いています。その他IT機器のアプリのレビュー、たまに100円ショップなど。


スポンサーリンク

 - HTML/JavaScript