データをチャート形式で表示するために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を利用することでさくっとチャートができ、とても便利だと思います。