Chart.jsでウェブ上にグラフを描画する方法(記述方法)

Chart.jsを読み込む記述ができたら、あとはChart.jsを使ってグラフを描画する記述を加えるだけです。グラフの種類別に記述方法は異なりますが、大まかなHTML部分は共通しています。そこで、共通する部分を先にご紹介いたします。各サンプルページと併せてご参照下さい。


まずは、共通部分からご紹介いたします。とても簡単です。

Chart.jsでグラフを描画するための共通記述

Chart.jsスクリプトを使ってグラフを描く際には、HTMLを以下のような感じで記述します。記述構成はとても簡単で、(1)Chart.jsを読み込んでおき、(2)グラフの描画空間を確保し、(3)グラフの描画内容を記述……という3点を書くだけです。

HTML内に記述するポイントは3点だけ

HTML内に記述するポイントは3点だけ


1. Chart.jsスクリプトを読み込む
これは前のページでご紹介した通りです。

2. グラフの描画空間を確保
グラフを描画したい場所に、canvas要素を使って下記のように1行を記述するだけです。
<canvas id="graph-area" height="450" width="600"></canvas>
id名は後からスクリプトで使いますので、必ず他と重複しない名称を付けて下さい。同一ページ内で同じid名は1度しか使えません。ここでは「graph-area」としています。同一ページ内に複数のグラフ(canvas要素)を配置する場合は、異なるid名を割り振って下さい。

なお、描画領域の大きさは(上記のように)width属性とheight属性にピクセル数を記述することで指定できますが、別途CSSを使って指定することもできます。閲覧者の描画空間に合わせてグラフのサイズを変更したい(=レスポンシブ化したい)場合は、CSSで大きさを指定するか、またはChart.jsのオプション機能を使います。その方法は、最後のページでご紹介いたします。

また、画像を表示するimg要素とは異なり、終了タグ</canvas>を省略することはできませんので注意して下さい。<canvas>~</canvas>の間には、canvas要素に非対応のブラウザ(IE8以下など)向けに表示する内容を記述できます。例えば下記のように。
<canvas id="graph-area" height="450" width="600">
   (※表示にはcanvas要素を解釈可能なブラウザが必要です)
</canvas>
canvas要素に対応しているブラウザは、canvas要素の中身(<canvas>~</canvas>の間に書かれた内容)を無視します。

3. グラフの描画内容を記述
以下のようにscript要素を使って、描画の指示をします。
<script>
   描画内容の指示
</script>
ここで記述する内容については描きたいグラフによって異なりますので、以下でグラフの種類別にご紹介いたします。


Chart.jsで円グラフを描くための追加記述

円グラフの表示例

円グラフの表示例

Chart.jsで円グラフを描くためには、さらに以下のようにJavaScriptソースを記述します。表示例は右図の通りです。実際にブラウザで表示させてみたい場合は、サンプルページ「円グラフの表示テスト」をご覧下さい。

下記では、5つの項目で円グラフを構成しています。数は必要に応じて増減できます。

 
<script type="text/javascript">

   // ▼グラフの中身
   var pieData = [
      {
         value: 240,            // 値
         color:"#F7464A",       // 色
         highlight: "#FF5A5E",  // マウスが載った際の色
         label: "りんご"        // ラベル
      },
      {
         value: 50,
         color: "#41C44E",
         highlight: "#6CD173",
         label: "メロン"
      },
      {
         value: 100,
         color: "#FDB45C",
         highlight: "#FFC870",
         label: "みかん"
      },
      {
         value: 65,
         color: "#AA49B8",
         highlight: "#C583CF",
         label: "ぶどう"
      },
      {
         value: 75,
         color: "#4D5360",
         highlight: "#616774",
         label: "その他"
      }

   ];

   // ▼上記のグラフを描画するための記述
   window.onload = function(){
      var ctx = document.getElementById("graph-area").getContext("2d");
      window.myPie = new Chart(ctx).Pie(pieData);
   };

</script>
変数pieDataの中に、必要なだけ(円グラフを構成する)項目を記述します。意味はソース中にコメントの形で記した通りです。グラフの値(value)、塗りつぶす色(color)、マウスが載った際の色(highlight)、ラベル(label)の4情報を記述するだけです。値は特に合計を100にする必要はありません。

なお、円グラフを描画する先のcanvas要素に記述したid名が「graph-area」ではない場合は、上記ソースの「graph-area」部分を修正して下さい。それ以外の部分はコピー&ペーストするだけで使えます。

Chart.jsで棒グラフを描くための追加記述

棒グラフの表示例

棒グラフの表示例

Chart.jsで棒グラフを描くためには、さらに以下のようにJavaScriptソースを記述します。表示例は右図の通りです。実際にブラウザで表示させてみたい場合は、サンプルページ「棒グラフの表示テスト」をご覧下さい。

下記では、横軸に7項目を用意し、それぞれに赤と青の2つの値を掲載した棒グラフを作っています。数は必要に応じて増減できます。

 
<script type="text/javascript">

   // ▼グラフの中身
   var barChartData = {
      labels : ["花組","月組","雪組","星組","宙組","海組","彗組"],
      datasets : [
         {
            fillColor : "rgba(240,128,128,0.6)",    // 塗りつぶし色
            strokeColor : "rgba(240,128,128,0.9)",  // 枠線の色
            highlightFill: "rgba(255,64,64,0.75)",  // マウスが載った際の塗りつぶし色
            highlightStroke: "rgba(255,64,64,1)",   // マウスが載った際の枠線の色
            data : [ 20, 30, 40, 45, 60, 70 , 80 ]     // 各棒の値(カンマ区切りで指定)
         },
         {
            fillColor : "rgba(151,187,205,0.6)",
            strokeColor : "rgba(151,187,205,0.9)",
            highlightFill : "rgba(64,96,255,0.75)",
            highlightStroke : "rgba(64,96,255,1)",
            data : [ 95, 80, 70, 60, 55, 40, 25 ]
         }
      ]

   }

   // ▼上記のグラフを描画するための記述
   window.onload = function(){
      var ctx = document.getElementById("graph-area").getContext("2d");
      window.myBar = new Chart(ctx).Bar(barChartData);
   }

</script>
変数barChartDataの中に、棒グラフを構成する情報を記述します。最初の「labels:」の部分には横軸のラベルを列挙しています。引用符で囲んで必要なだけ列挙して下さい。

続いて、「datasets:」の部分に縦軸の値を記述します。意味はソース中にコメントの形で記した通りです。棒を塗りつぶす色(fillColor)、棒の枠線の色(strokeColor)、マウスが載った際の塗りつぶしの色(highlightFill)、マウスが載った際の枠線の色(highlightStroke)を記述し、最後に各棒の値(data)をカンマ区切りの数値で指定します。

※上記のソースでは、色を(透明度を含んだ)RGBAカラーモデルで指定していますが、「red」や「green」のような色名で指定することもできます。例えば「rgba(240,128,128,0.6)」は「R(赤)240, G(緑)128, B(青)128, A(不透明度)60%」の意味なので「40%透過する淡い赤色」で表示されます。

なお、棒グラフを描画する先のcanvas要素に記述したid名が「graph-area」ではない場合は、上記ソースの「graph-area」部分を修正して下さい。それ以外の部分はコピー&ペーストするだけで使えます。

Chart.jsで折れ線グラフを描くための追加記述

折れ線グラフの表示例

折れ線グラフの表示例

Chart.jsで折れ線グラフを描くためには、さらに以下のようにJavaScriptソースを記述します。表示例は右図の通りです。実際にブラウザで表示させてみたい場合は、サンプルページ「折れ線グラフの表示テスト」をご覧下さい。

下記では、横軸に7項目を用意し、それぞれに緑と青の2つの値を掲載した折れ線グラフを作っています。数は必要に応じて増減できます。

 
<script type="text/javascript">

   // ▼グラフの中身
   var lineChartData = {
      labels : ["初期","1期","2期","3期","4期","5期","終期"],
      datasets : [
         {
            label: "緑データ",
            fillColor : "rgba(92,220,92,0.2)", // 線から下端までを塗りつぶす色
            strokeColor : "rgba(92,220,92,1)", // 折れ線の色
            pointColor : "rgba(92,220,92,1)",  // ドットの塗りつぶし色
            pointStrokeColor : "white",        // ドットの枠線色
            pointHighlightFill : "yellow",     // マウスが載った際のドットの塗りつぶし色
            pointHighlightStroke : "green",    // マウスが載った際のドットの枠線色
            data : [ 100, 97, 87, 50, 21, 13, 10 ]       // 各点の値
         },
         {
            label: "青データ",
            fillColor : "rgba(151,187,205,0.2)",
            strokeColor : "rgba(151,187,205,1)",
            pointColor : "rgba(151,187,205,1)",
            pointStrokeColor : "white",
            pointHighlightFill : "yellow",
            pointHighlightStroke : "blue",
            data : [ 30, 60, 30, 80, 95, 20, 50 ]
         }
      ]

   }

   // ▼上記のグラフを描画するための記述
   window.onload = function(){
      var ctx = document.getElementById("graph-area").getContext("2d");
      window.myLine = new Chart(ctx).Line(lineChartData);
   }

</script>
変数lineChartDataの中に、折れ線グラフを構成する情報を記述します。最初の「labels:」の部分には横軸のラベルを列挙しています。引用符で囲んで必要なだけ列挙して下さい。

続いて、「datasets:」の部分に縦軸の値を記述します。意味はソース中にコメントの形で記した通りです。 線から下端までを塗りつぶす色(fillColor)、折れ線の色(strokeColor)、ドットの塗りつぶし色(pointColor)、ドットの枠線色(pointStrokeColor)、マウスが載った際のドットの塗りつぶし色(pointHighlightFill)、マウスが載った際のドットの枠線色(pointHighlightStroke)を記述し、最後に各棒の値(data)をカンマ区切りの数値で指定します。

※色は「red」や「green」のような色名で指定することもできますし、透明度を含んだRGBAカラーモデルで指定することもできます。 例えば「rgba(92,220,92,0.2)」は「R(赤)92, G(緑)220, B(青)92, A(不透明度)20%」の意味なので「80%透過する明るい緑色」で表示されます。

なお、折れ線グラフを描画する先のcanvas要素に記述したid名が「graph-area」ではない場合は、上記ソースの「graph-area」部分を修正して下さい。それ以外の部分はコピー&ペーストするだけで使えます。


スクリプト「Chart.js」を使って円グラフ・棒グラフ・折れ線グラフを描画する方法は以上です。最後に、これらのグラフの表示サイズをレスポンシブにする(=閲覧者の描画領域の空間に合わせてグラフの表示サイズも変化させる)方法をご紹介いたします。