どうもきよです！
今回はグラフ作成ライブラリのamCharts4について導入方法と使い方をメモしていきます！
下記は公式のデモサイトです！色んなグラフを作成できるので試してみてください！
amChartsデモサイト
今回はXYChartのみサンプルとして使い方をメモしておきます。
■導入方法
・下記から自分に合った方法を選ぶ
・npmの場合 npm install @amcharts/amcharts4 ・yarnの場合 yarn add @amcharts/amcharts4 ・CDNの場合 <script src="https://cdn.amcharts.com/lib/4/core.js"></script> <script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
・地図を作成する場合は下記もインストールする
・npmの場合 npm install @amcharts/amcharts4-geodata ・yarnの場合 yarn add @amcharts/amcharts4-geodata ・CDNの場合 <script src="https://cdn.amcharts.com/lib/4/geodata/germanyLow.js"></script>
これでnode_moduleds内にamCharts4がインストールができる
■使い方
・amChartsのインストールができたので、jsファイルで読み込む(CDNの場合は不要)
import * as am4core from "@amcharts/amcharts4/core"; import * as am4charts from "@amcharts/amcharts4/charts";
・チャートインスタンス作成
let chart = am4core.create("chartdiv", am4charts.XYChart);
※第一引数:DOMのid名(そのdivにグラフが作成される)
※第二引数:chartクラス(ここではXYChartクラス)
■XYChart (X軸とY軸からなるグラフ)
・公式リファレンス
XYChart公式リファレンス
・XYChartを作成する上で必要なもの
チャートインスタンス
let chart = am4core.create("chartdiv", am4charts.XYChart);
データ
[
{country: 'Lithuania', litres: '501'},
{country: 'Czechia', litres: '301'},
{country: 'Ireland', litres: '201'},
{country: 'Germany', litres: '101'},
}
※大体上のような感じのデータ構造
※key名は自由でOK
少なくとも2つの軸-垂直と水平
・X軸 = 水平方向 = CategoryAxis
・Y軸 = 垂直方向 = ValueAxis
少なくとも1つのシリーズ
let series = chart.series.push(new am4charts.ColumnSeries());
※例として棒グラフ
・シリーズ = どのような見た目のグラフにするか
・XYChartで使えるシリーズ
– 折れ線グラフ = LineSeries
– 棒グラフ = ColumnSeries
– ろうそく? = CandlestickSeries
– 円錐 = ConeSeries
– 波みたいなやつ – CurvedColumnSeries
– 階段上の折れ線グラフ = StepLineSeries
– ちょっとよくわからないグラフ – OHLCSeries
■サンプルコード
See the Pen amchart1 by suzuyosy (@suzuyosy) on CodePen.dark
amChart4の使い方詳細についてはこちら！
以上、よろしくお願いいたします。