このたび有名なグラフ作成プラグインであるChart.jsを触ってみました。グラフを画像ではなくJSで、しかもリッチなアニメーション付きで簡単に作れるなんて便利！更新頻度の高いグラフが必要なときにぜひ使いたいプラグインです。
６種類のグラフが作れます
このプラグインでは６種類のグラフを作る事ができます。ドーナツグラフ、線グラフ、鶏頭図、棒グラフ、円グラフ、レーダーチャートの６つです。今回は円グラフの設定を紹介しようと思います！
グラフを作る準備！
まずは公式サイトからchart.jsをダウンロードしてきます。準備はこれだけで大丈夫です！あ、でもcanvasを使うのでHTML5で書く必要があります。
<script src="Chart.js"></script>
円グラフを作ろう！
ここでは、円グラフの設定の仕方を紹介しようと思います。全６種のグラフの詳しい設定の仕方は、公式のドキュメントサイトがあるので下記からどうぞ。
Chart.js Documentation
HTMLの記述は最低限これだけです。ここにjavascriptの記述を追加していきます。
<!doctype html> <html> <head> <title>円グラフを作ろう</title> <script src="Chart.js"></script> </head> <body> <canvas id="canvas" height="450" width="450"></canvas> </body> </html>
下記のスクリプトを＜/body＞タグの直前に記述します。変数dataには１項目の数値と色を入れていきます。
var data = [
{
value: 30,
color:"#F38630"
},
{
value : 50,
color : "#E0E4CC"
},
{
value : 100,
color : "#69D2E7"
}
]
var myPie = new Chart(document.getElementById("canvas").getContext("2d")).Pie(data);
描画に関するオプションもいくつか用意されていて、例えば速度の調整をしたい場合は下記のように記述します。
var data = [
{
value: 30,
color:"#F38630"
},
{
value : 50,
color : "#E0E4CC"
},
{
value : 100,
color : "#69D2E7"
}
]
//オプションの設定を変数に入れていきます。
var options={
animationSteps : 300
}
var myPie = new Chart(document.getElementById("canvas").getContext("2d")).Pie(data,options);
ほかにもいろいろオプションがついているので、いろいろ試してみるのも面白いですよ！
より詳しい解説や、デモは下記公式ページで確認してみてください。では！
