vdeep

*

vdeepはプログラミング、IT、Web技術、ライフハックの事などなどを管理人okutaniがつぶやくブログです。月間13万PV〜。

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

      2017/01/31

LINEで送る
Pocket

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

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

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

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

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

スポンサーリンク

Chart.jsの導入方法

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

LINKChart.js | Open source HTML5 Charts for your website

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

chart-js2

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

chart-js3

この中にある「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!

chart-js4

中身を見ることはないかと思うので、今回は圧縮版の「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です。

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

chart-js5

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>

chart-js6

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>

chart-js7

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>

chart-js8

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>

chart-js9

LINKデモはこちら

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

まとめ

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

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

LINKChart.js | Documentation

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

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

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

この記事が気に入ったら
いいね ! しよう

Twitter で
LINEで送る
Pocket

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

 - JavaScript

スポンサーリンク

PC用AdSense

PC用AdSense

Share
  • このエントリーをはてなブックマークに追加

  こちらの関連記事もどうぞ

「Animate.css + wow.js」でWebサイトにアニメーションをつけてみよう

こんにちは、okutani(@okutani_t)です。みなさんはWebサイトに …

vdeepのトップページへ戻る画像です。風船の形をした島を女の子が掴んでいます。