More than 5 years have passed since last update.

高機能チャートライブラリのamCharts ４がリリースされたので使ってみる

Last updated at 2019-07-11Posted at 2019-01-10

amCharts 4

背景

JavaScriptのチャートライブラリはChart.jsとHighchartsが人気です。
高機能で綺麗なグラフが描けるamChartsが以前から気になっていたいましたが、バージョン4になっていたので早速使ってみました。

どうやらv3から新しく作り直したようで、かなり進化してるみたいです。
さらに、グラフの隅に付くリンクを表示していれば、フリーで商用利用も可能です。

この記事を機会に使う人が増えると嬉しい。

amCharts 4

amCharts 4 Demos

リリース：2018年11月

特徴

綺麗で高機能なチャートやマップ
豊富なグラフの種類
CanvasではなくSVG
TypeScriptとES6で作られた
ドキュメントにReactやVueでの導入も載っています。

v3から設計も見直されて一新したため、完全な後方互換性はありません。しかし、v3とv4を同じページで使用しても影響ないため少しずつ置き換えても良さそうです。

導入

CDNからライブラリを取得できます。

<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>

core.jsに基本的な機能が、chart.jsにチャート描画用の機能が含まれます。この二つだけでも動きますが、アニメーションや他のカラーテーマを使いたい場合は下のも一緒に取得して下さい。

<!-- アニメーション -->
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<!-- カラーテーマ -->
<script src="https://www.amcharts.com/lib/4/themes/material.js"></script>

npmかダウンロードしても利用できます。

使ってみる

用意したデータを使ってチャートを作ってみます。
Demoのline-graphを参考に時系列データのチャートを作成しました。

実際に動くサンプルとデータなどの解説はこちら

コード


<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>

<!-- スタイル -->
<style>
#chartdiv {
  width: 100%;
  height: 500px;
}
</style>

<!-- グラフの描画先 -->
<div id="chartdiv"></div>

<script>
window.onload = function () {
  // グラフ描画
  drawChart(jsonUrl);
}

function drawChart(jsonUrl) {
  // アニメーションテーマを使う
  am4core.useTheme(am4themes_animated);

  var chart = am4core.create("chartdiv", am4charts.XYChart);

  chart.data = [
  {
      "date": "2018/1/1",
      "temperature": 0.4
    },
    {
      "date": "2018/1/2",
      "temperature": 1.1
    },
    // 省略
  ]

  // x軸
  var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
  // グリッド間隔
  dateAxis.renderer.minGridDistance = 60;
  // y軸
  var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

  // 時系列データ
  var series = chart.series.push(new am4charts.LineSeries());
  series.name = "temperature";
  series.dataFields.valueY = "temperature";
  series.dataFields.dateX = "date";
  series.tooltipText = "{valueY}"; // demoでは"{value}"となっているが間違い。

  series.tooltip.pointerOrientation = "vertical";

  // カーソルに追従するライン
  chart.cursor = new am4charts.XYCursor();
  chart.cursor.snapToSeries = series;
  chart.cursor.xAxis = dateAxis;

  // スクロールバー
  //chart.scrollbarY = new am4core.Scrollbar();
  chart.scrollbarX = new am4core.Scrollbar();
}
</script>

データはjsonを渡します。

また、jsonファイルをGETリクエストで取得して読み込むこともできる。切り分けも簡単ですし $AjaxやaxiosなどのHTTPリクエストのライブラリがなくても大丈夫です。

  // 加工した気象データのjson
  var jsonUrl = 'https://www.suzu6.net/images/posts/56/sapporo_2018.json';
  // GETでファイルの読み込みもできる
  chart.dataSource.url = jsonUrl;