グラフ作成にオススメ！「Chart.js」がかんたんに使えてイイ感じ

2016/06/11 2017/01/31

Pocket

こんにちは、okutani(@okutani_t)です。先日、Google Analyticsのデータを整形して表示するツールを仕事で作ってました。

そのときに、「Chart.js」なるものを見つけて使ってみたのですが、なかなかオシャレでよさげだったのでご紹介します。

Chart.jsを使うとWebサイト上でグラフがかんたんに作成できます。特徴としては「フラットデザイン」「HTML5のCanvasを使っている」「IE8対応」「jQueryが不要」などなど。

非プログラマーでも比較的かんたんに設置できるかと思いますので、グラフを使う機会があれば参考にしてください。

では、さっそくChart.jsの導入＆利用方法についてみていきましょう。

1 Chart.jsの導入方法
2 まとめ

Chart.jsの導入方法

Chart.jsの導入方法をみていきましょう。下記公式サイトへアクセスします。

LINKChart.js | Open source HTML5 Charts for your website

TOPページにある「Download」を選択。

GitHubのChart.jsページに飛びます。「Clone or download」→「Download ZIP」を選択。ダウンロード後、解凍しておきましょう。

この中にある「dist/Chart.js」もしくは「dist/Chart.min.js」を、利用したいプロジェクトに設置すればOKですね。ちなみに、min版の方は圧縮されたJSファイルです。

次のようにプロジェクトに設置します。

<script src="Chart.js"></script>

もしくは

<script src="Chart.min.js"></script>

samplesフォルダの中に予め、Chart.jsを使ったサンプルが入っているので、そちらを一通り確認しておくとGoodです。

上記の方法以外に、下記サイトからCDNで提供されているChart.jsを使ってもOK。お好きな方法で設置してみてください。

LINKChartjs – cdnjs.com – The free and open source CDN for web related libraries to speed up your website!

中身を見ることはないかと思うので、今回は圧縮版の「https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js」の方を使っていきます。

Chart.jsの設置例

HTML5で簡単なサンプルを用意してみました。

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>Chart.js TEST</title>
  <meta charset="UTF-8">
</head>
<body>
  <h1>Chart.jsのテスト</h1>

  <div style="width: 50%">
    <canvas id="chart" height="450" width="600"></canvas>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
  <!-- もしくは<script src="Chart.min.js"></script> -->
  <script>
    // ここにChart.jsの処理を記述
  </script>
</body>
</html>

このHTMLをテンプレートにして、それぞれチャートのサンプルを表示させてみます。

縦軸グラフ

設置例内の「// ここにChart.jsの処理を記述」に、それぞれのチャートに合わせた実装をおこなっていきましょう。

縦軸グラフのコードは下記のとおりです。

<script>
  var barChartData = {
    labels : ["田中","山田","奥谷","ザビエル","おそ松","ピカチュウ","あひる"],
    datasets : [
      {
        fillColor : /*"#d685b0"*/"rgba(214,133,176,0.7)",
        strokeColor : /*"#d685b0"*/"rgba(214,133,176,0.7)",
        highlightFill: /*"#eebdcb"*/"rgba(238,189,203,0.7)",
        highlightStroke: /*"#eebdcb"*/"rgba(238,189,203,0.7)",
        data : [20,45,1,20,19,33,96]
      },
      {
        fillColor : /*"#7fc2ef"*/"rgba(127,194,239,0.7)",
        strokeColor : /*"#7fc2ef"*/"rgba(127,194,239,0.7)",
        highlightFill : /*"#a5d1f4"*/"rgba(165,209,244,0.7)",
        highlightStroke : /*"#a5d1f4"*/"rgba(165,209,244,0.7)",
        data : [2,54,77,32,9,78,95]
      }
    ]

  }
  window.onload = function(){
    var ctx = document.getElementById("chart").getContext("2d");
    window.myBar = new Chart(ctx).Bar(barChartData, {
      responsive : true,
      // アニメーションを停止させる場合は下記を追加
      /* animation : false */
    });
  }
</script>

色の指定は/**/で囲まれたものをrgbaに変換して、透明度をつけてみました。どちらを使ってもOKです。

こんな感じになりました（右横のラベルは個別実装）。

LINKデモはこちら。

Chart.jsで利用するグラフは、デフォルトでアニメーション効果がついています。良い感じです。

停止させる場合は「animation : false」を追加してあげればOKです。覚えておくと良いでしょう。

ドーナツグラフ

ドーナッツ型の円グラフです。こちらも読み込み時に動きがついてオシャレです。

<script>
  var doughnutData = [
      {
        value: 500,
        color:"#9bcad0",
        highlight: "#a7d7de",
        label: "スマートフォン"
      },
      {
        value: 150,
        color: "#d5a87f",
        highlight: "#e4b68a",
        label: "PC"
      },
      {
        value: 80,
        color: "#cca9ca",
        highlight: "#dcb7da",
        label: "タブレット"
      },
      {
        value: 20,
        color: "#edef9c",
        highlight: "#fcfea6",
        label: "その他デバイス"
      }
    ];
    window.onload = function(){
      var ctx = document.getElementById("chart").getContext("2d");
      window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {
        responsive : true
      });
    }
</script>

LINKデモはこちら。

マウスを乗せるとツールチップが表示されます。オシャレですねぇ。

円グラフ

次は円グラフ。ドーナツグラフよりこっちの方が頻繁に利用するんじゃないでしょうか。

<script>
  var pieData = [
    {
      value: 37,
      color:"#9acce3",
      highlight: "#aadbf2",
      label: "20代"
    },
    {
      value: 30,
      color: "#70b062",
      highlight: "#7fc170",
      label: "30代"
    },
    {
      value: 20,
      color: "#dbdf19",
      highlight: "#ecef23",
      label: "40代"
    },
    {
      value: 10,
      color: "#a979ad",
      highlight: "#bb8ebf",
      label: "おばあちゃん"
    },
    {
      value: 3,
      color: "#cd5638",
      highlight: "#e2694a",
      label: "ひろし"
    }

  ];

  window.onload = function(){
    var ctx = document.getElementById("pie-chart").getContext("2d");
    window.myPie = new Chart(ctx).Pie(pieData);
  };
</script>

LINKデモはこちら。

構成比率なんかを表したいときに利用すると良いですね。

横軸グラフ

横軸グラフは下記のとおり。

<script>
  var lineChartData = {
    labels : ["1月","2月","3月","4月","5月","6月"],
    datasets : [
      {
        label: "私",
        fillColor : /*"#f2dae8"*/"rgba(242,218,232,0.6)",
        strokeColor : /*"#dd9cb4"*/"rgba(221,156,180,0.6)",
        pointColor : /*"#dd9cb4"*/"rgba(221,156,180,0.6)",
        pointStrokeColor : "#fff",
        pointHighlightFill : "#fff",
        pointHighlightStroke : /*"#dd9cb4"*/"rgba(221,156,180,0.6)",
        data : [67,65,66,70,71,77]
      },
      {
        label: "彼",
        fillColor : /*"#afd0ef"*/"rgba(175,208,239,0.6)",
        strokeColor : /*"#fb7dd8"*/"rgba(143,183,221,0.6)",
        pointColor : /*"#8fb7dd"*/"rgba(143,183,221,0.6)",
        pointStrokeColor : "#fff",
        pointHighlightFill : "#fff",
        pointHighlightStroke : /*"#8fb7dd"*/"rgba(143,183,221,0.6)",
        data : [57,56,55,53,56,49]
      }
    ]

  }

  window.onload = function(){
    var ctx = document.getElementById("chart").getContext("2d");
    window.myLine = new Chart(ctx).Line(lineChartData, {
      responsive: true
      // 下記を追加すると線がまっすぐになります
      /* bezierCurve: false */
    });
  }
</script>

LINKデモはこちら（デモの表示項目違うのは気にしない）。

線が滑らかで綺麗ですね。

デフォルトでは線が丸みを帯びていますが、「bezierCurve: false」を指定してあげると、ジグザグの線になります。

レーダーチャート

格闘ゲームとかRPGゲームとかでよく見るレーダーチャート。コードは次のとおりです。

<script>
  var radarChartData = {
    labels: ["HP", "MP", "知力", "腹筋力", "食事力", "魔力", "ハンドボール投げ"],
    datasets: [
      {
        label: "私",
        fillColor : /*"#f2dae8"*/"rgba(242,218,232,0.6)",
        strokeColor : /*"#dd9cb4"*/"rgba(221,156,180,0.6)",
        pointColor : /*"#dd9cb4"*/"rgba(221,156,180,0.6)",
        pointStrokeColor : "#fff",
        pointHighlightFill : "#fff",
        pointHighlightStroke : /*"#dd9cb4"*/"rgba(221,156,180,0.6)",
        data : [100,32,80,95,80,10,50]
      },
      {
        label: "彼",
        fillColor : /*"#afd0ef"*/"rgba(175,208,239,0.6)",
        strokeColor : /*"#8fb7dd"*/"rgba(143,183,221,0.6)",
        pointColor : /*"#8fb7dd"*/"rgba(143,183,221,0.6)",
        pointStrokeColor : "#fff",
        pointHighlightFill : "#fff",
        pointHighlightStroke : /*"#8fb7dd"*/"rgba(143,183,221,0.6)",
        data : [35,62,42,40,37,67,70]
      }
    ]
  };
  window.onload = function(){
    window.myRadar = new Chart(document.getElementById("radar-chart").getContext("2d")).Radar(radarChartData, {
      responsive: true
    });
  }
</script>

LINKデモはこちら。

これでかんたんに、ゲームキャラクターの能力別パラメーター表示なんかができて良いですね。ゲームを作る予定は今のところありませんがっ。

まとめ

Chart.jsを使うことで、かんたん＆オシャレなグラフを作成することができました。

どのグラフもオプションの指定ができ、アニメーションの有無なんかもコントロールできました。使えるオプションは下記から調べることができます。

LINKChart.js | Documentation

また、カラー配色はこちらのサイトを参考にしました。これのおかげで色のバランスが取れてよさげです（今回は『14.フレッシュでジューシーなイメージ』を使用）。

LINKカラー配色で迷わない！シーン別配色見本32パターン | Web制作会社スタイル

グラフ作成をする際の参考になれば幸いです。

Pocket

okutani (okutani_t) のヒトコト

okutani_t

グラフ系は今までまったく作ったことがなかったので、思った以上に楽しかったです。値を当てはめるだけで綺麗なグラフが作れるので、Chart.jsおすすめですー。

Web開発のお仕事を募集しています

フリーランスのエンジニアとして、Webシステム開発のお仕事依頼を随時募集しています（現在の業務量によってお受けできない場合もあります）。

「Ruby on Rails」「JavaScript（jQuery, Reactなど）」「HTML + CSS」を用いたシステム開発、「Heroku」等を用いたサーバー構築・運用、「Git」や「GitHub」を利用したソーシャルコーディングなどに対応しています。

ご依頼を検討している方は、下記リンク本ブログからのお問い合わせ、もしくはokutaniのポートフォリオからご連絡ください。

LINKお問い合わせ

LINKokutani's Portfolio

- JavaScript