Webサイトにいろいろなグラフを表示 Chart.jsを使ってみる
SNSでシェアする
システムインテグレーション部の小林丈容です。
先日、サイト内に円グラフを表示したい案件があったため、JavaScriptライブラリのChart.jsを使用しました。
Chart.jsとはcanvasを使用して簡単にグラフが描画できるという優れもの、Webサイトにグラフを表示したい場合には使って見るのも良いかと思います。
Chart.jsとは
Chart.jsはcanvas上に簡単にグラフを表示できるJavaScriptのライブラリです。
グラフの種類は棒グラフや円グラフ、レーダーチャートなど様々です。
また、カスタマイズ要素も非常に豊富で指定するデータやオプションで自分の好きなようにグラフを作成できます。
詳しくは公式サイトをご覧ください。
Chart.jsの導入
まず、Chart.jsを導入します。
Chart.jsはCDNにも公開されているので、今回は手っ取り早くそちらにリンクします。
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Chart.jsを使ってみる</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script> </head>
以上で準備完了。早速使っていきましょう。
Chart.jsの使い方
まずはHTML内でグラフを表示したい場所にcanvasタグを挿入します。
<body> <p>円グラフ</p> <canvas id="sample" width="400" height="300"></canvas>/*id,width,heightは任意で。*/ </body>
次にjsのコードを書いていきます。以下は円グラフの場合の例です。
<script>
window.onload = function(){
var canvas = document.getElementById('chartDoughnut');//canvasタグのIDを取得
if(canvas.getContext){
//canvasが有効の場合
var context = canvas.getContext('2d');//canvasの描画機能を有効にします
//グラフのデータ
var data = [
{
value: 85,//値
color:"#ff0000",//グラフの色
label: "data1"//項目名
},
{
value: 26,
color: "#00ff00",
label: "data2"
},
{
value: 55,
color: "#0000ff",
label: "data3"
}
];
//グラフを生成
var sampleChart = new Chart(context).Doughnut(data);
}
}
</script>
以上です。とっても簡単です。
なお、アニメーションの有無などのoptionの指定も可能です。
特に公式ページにも記載されている通り、自動的に親要素の大きさを調整してくれるresponsiveは非常に便利なのでお試しあれ。
以下はアニメーションなしでresponsiveを有効にした際の例です。上のソースの27・28行目にあたります。
//グラフを生成
var sampleChart = new Chart(context).Doughnut(data,{animation:false,responsive:true});
これで動的なグラフの作成も楽々です。ありがたや。
SNSでシェアする