Help us understand the problem. What is going on with this article?

chart.jsの使い方!chart.jsでおしゃれなグラフを表示する方法(入門編)

はじめに

今回はchart.jsを用いて「動く!」「おしゃれ!」「かんたん!」なグラフを表示していきたいと思います。

⚠️htmlファイルとjsファイルをそれぞれ作ることを推奨しますが、初心者の方は躓く可能性があるため、独断でまとめてhtmlファイルに記述しちゃいます。

chart.jsとは

折れ線グラフ、棒グラフ、円グラフ、レーダーチャートなど、8種類のグラフが簡単に描けてしまうJavascriptのライブラリです。 HTML5のCanvasを使って描画され、表示の際の気持ちいいアニメーションの動きが特徴的です。 とても分かりやすいマークアップなので、誰でも簡単に編集ができるようになっています。

実際に表示すると↓のようになります。

chartjs.gif

ソースコード

早速ソースコードに入ります。
公式サイトでもサンプルコードが公開されています。
公式サイト内でグラフを弄れるのでぜひ!


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>chart</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>
</head>
<body>

<canvas id="myChart"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
    datasets: [{

      label: 'label',
      data: [3, 18, 6, 10, 12, 7, 12],
      backgroundColor: "rgba(255,153,0,0.4)"
    }]
  }
});
</script>

</body>
</html>

各グラフの描写方法

棒グラフ:type:'line',
折れ線グラフ:type:'bar',
レーダーチャート:type:'radar',
散布図:type:'scatter',
円グラフ:type:'pie',
ドーナツチャート:type:'doughnut',
バブルチャート:type:'bubble',
鶏頭図:type:'polarArea',
に変更すれば描写できます。

グラフの数値を変数によって動的に変化させたいとき

data: [3, 18, 6, 10, 12, 7, 12],
         ↓
data: [a, b, c, d, e, d, e], 

の数値の部分を任意の変数にするだけでok!

まとめ

今回はchart.jsで描写する8つのグラフについて紹介しました。

紹介したソースコードは非常にシンプルですが、こちらをベースに御自身で必要な要素を追加してみて下さい。

aoi-takumi
広く浅く勉強中の新卒エンジニアです。機械学習の沼にはまりつつあります。自然言語処理が好きです。 自分が引っかかったことなどを備忘録として残していきます。 ※投稿する記事の内容は個人の意見であり、所属する企業の見解を代表するものではありません。
japan-systems
「2019年に50周年を迎えたIT企業です。最先端の技術により全国の企業、官公庁、自治体に多くの実績があります。」
https://www.japan-systems.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away