データをチャート形式で表示するためにamChartsを利用してみる
あるデータをチャートで表示するのにamChartsを利用したときの覚え書き。
amChartsとは
javascriptでチャートを描画するためのフレームワークです。 棒、エリア、列、バー、パイ、XY、散布、ローソク足のようなチャートを描画することが出来ます。
amChartsの簡単な使用方法
amcharts.jsの読み込み
CDNを利用してamcharts.jsを読み込みます。
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
表示するチャートのjsを読み込む
表示したいチャートの種類のjsを読み込みます。ここではpie.jsを読み込みます。
<script src="//www.amcharts.com/lib/3/pie.js"></script>
チャートを表示する領域を設定する
htmlにチャートを表示する領域を設定します。idは適当に設定します。
<div id="chart"></div>
上で指定したidにスタイルを設定します。
チャートの色等はjavascriptで指定するためチャートを描画する領域の幅と高さを指定しています。
#chart { width: 100%; height: 300px; }
チャートを設定する
単純なパイチャートを作成します。ここではphpが60%、javascriptが20%、htmlが20%のチャートを作成しています。
<script> var chart = AmCharts.makeChart("chart", { "type": "pie", "dataProvider": [ { "lang": "php", "val": 60 }, { "lang": "javascript", "val": 20 }, { "lang": "html", "val": 20 } ], "valueField": "val", "titleField": "lang" }); </script>
表示例
まとめ
ロゴが表示される以外は無料で利用できるので、データをチャートにして確認したいときなどはamChartsを利用することでさくっとチャートができ、とても便利だと思います。