WNT-Technology-20140212
Technology

アニメーションつきのグラフをカンタンに描画!一度は試してみるべきchart.jsを使ってみた

thumbnail_b_develop_140203

最近データの可視化が流行しているとの噂を聞きつけ、流行りものに乗っかるべくライブラリをあれこれ試しています。その中でも使い勝手がよくドキュメントも分かりやすいChart.jsを使ってWebNAUTのアクセスデータを可視化してみたいと思います。


Chart.jsを使おう

シンプルにグラフ描画ツールとして使えるものからリッチでインタラクティブな表現ができるものまで、データ可視化に使えるライブラリが充実してきています。
(恐ろしくカタカナが多いですね)

その中で使い方が分かりやすく扱いやすいChart.jsを使いWebNAUTのアクセスデータを可視化し、どのような方々に読んでいただいているのかを推察してみたいと思います。

元データとするのはおおよそ過去1年間の以下の4つの指標です。いずれもGoogle Analyticsで集計していきます。

  1. 時間別の閲覧数
  2. 曜日別の閲覧数
  3. デバイス別の閲覧数
  4. ブラウザとOS別の閲覧数

きっと同じくWeb業界で働く方、Webに関心のある方に多く読んでいただけているにちがいない!と思っているのですが、果たしてどうでしょうか?


Chart.jsで結果をアニメーションつきのグラフにしよう

曜日別の訪問数

時間別の訪問数

モバイル端末別の訪問数

ブラウザ別の訪問数

WebNAUTのユーザーはどんな方が多い?

以上の指標から、水曜日の朝9〜10時ごろ見られる方が多い、モバイル端末ではiPhoneで見られる方が一番多いという結果が得られました。また、ChromeがPCブラウザとして一番人気ということを考えるとやはりWebに関連する業界にいる・Webに関心のあるユーザーの方が多そうです。

いかがでしたか?データの見せ方によってウェブサイトで得られる体験が変わることが実感していただけるのではないでしょうか。


Chart.jsの使い方

それでは、Chart.jsの使い方をご説明します。
適宜このページのグラフ描画を行っているソースコードも参考にしてください。

まずは公式サイトからChart.jsをダウンロードし、外部ファイルとして読み込みます。それ以降に実行部分を記述していくわけですが、基本的にはChart.jsの公式サイトのドキュメントに従って、canvas要素を取得するオーソドックスな方法で簡単に実装できます。

<canvas id="canvas01" height="305" width="305"></canvas>
//canvas要素を取得
var canvas = document.getElementById("canvas01").getContext("2d");
 
//上で取得した要素を引数にしてChartオブジェクトを作成、描画するメソッドを実行
var draw = new Chart(canvas).Line(vals,options);

Lineメソッドの引数はグラフに必要な値(vals)とオプション(options)です。
当然、上の記述の隣に

var vals = {
labels : ["月","火","水","木","金","土","日"],
datasets : [
    {
     fillColor : "rgba(10,25,215,0.5)",
     strokeColor : "rgba(215,215,215,1)",
      pointColor :"rgba(215,215,215,1)",
      pointStrokeColor : "rgba(255,255,255,1)",
      data : [25624,39146,54187,43906,29283,12999,12091]
    }
  ]
}
var options = {
    pointDot : true,
    animationSteps : 70,
    onAnimationComplete : function(){
     $("#canvas01_desc").animate({
      "opacity" : 1
     },600,"linear");
    }
}
var canvas = document.getElementById("canvas01").getContext("2d");
var draw = new Chart(canvas).Line(vals,options);

などと書いてもいいわけですが、ページで複数箇所グラフがあること、今後使い回しやすくすることを考えると値の指定の部分と実行部分を分ける、静的な値はまとめて管理するなど、なるべく管理しやすくおきたいものです。

それでは、リッチでインタラクティブでカラフルで好奇心をアレするグラフライフをお楽しみください!

thumbnail_b_develop_140203

記事が気に入ったらシェアしよう

この記事を書いたメンバー

成果につながるWeb制作を

成果につながるWeb制作を
ビーワークスのミッションは「デザインで世の中を動かすこと」。
出版物、販促ツール、WEBサイト、ゲームアプリなど、多用な領域でクライアントのビジネス拡大に貢献するデザインを提供する制作会社です。

記事の更新をお知らせします!

  • 採用情報

    採用情報

    記事を読んで興味を持った方、
    ビーワークスの考え方に共感した方、
    一緒に新しいデザイン、創りませんか?

  • 制作実績

    制作実績

    日々、制作実績を更新中!
    ビーワークスの多様な実績をぜひご覧ください。

  • 魚座
  • 牡羊座
  • 牡牛座