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

エンジニアT

11年前

※この記事は2014年2月12日に執筆された記事です。現在は仕様が異なる可能性があります。

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

Chart.jsを使おう

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

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

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

時間別の閲覧数
曜日別の閲覧数
デバイス別の閲覧数
ブラウザとOS別の閲覧数

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

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

曜日別の訪問数

時間別の訪問数

モバイル端末別の訪問数

ブラウザ別の訪問数

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

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

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

Chart.jsの使い方

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

まずは公式サイトからChart.jsをダウンロードし、外部ファイルとして読み込みます。それ以降に実行部分を記述していくわけですが、基本的にはChart.jsの公式サイトのドキュメントに従って、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);

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

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