どうもきよです！
最近なんかモチベーションが高いので、
今回はamChart4の詳しい使い方についてメモしていこうと思います。
下記は公式のデモサイトです！色んなグラフを作成できるので試してみてください！
amChartsデモサイト
■XYChart
・公式リファレンス
XYChart公式リファレンス
ツールチップ
・グラフをホバーした際に、位置の詳細を表示する
・adapterを使うことで、カスタマイズも可能
See the Pen amChart2 by suzuyosy (@suzuyosy) on CodePen.dark
※ポイント
// チャートインスタンスのカーソルに設定する
chart.cursor = new am4charts.XYCursor();
/**
* ツールチップの内容を変えたい場合は下記のようにコールバックで設定できる
* 下記はX軸のツールチップを修正した例
* CodePenにコメントアウトしている部分があるので外してみると表示が変わります
*/
categoryAxis.adapter.add("getTooltipText", (text, target) => {
return ">>> " + text + " <<<";
});
グラフズーム
・グラフ上でマウスホイールを使用した際の動作
・オプション
– zoomX
– zoomY
– zoomXY
– panX
– panY
– panXY
– none
See the Pen amChart3 by suzuyosy (@suzuyosy) on CodePen.dark
※ポイント
// ホイールを動かした時のグラフの感度 chart.plotContainer.mouseOptions.sensitivity = 0.5; // ホイールを動かした時のzoomの仕方 chart.mouseWheelBehavior = 'zoomX'
スクロールバー
・グラフをスクロールできるようにする
See the Pen amChart4 by suzuyosy (@suzuyosy) on CodePen.dark
※ポイント
// 横軸のスクロールバー chart.scrollbarX = new am4core.Scrollbar(); // 縦軸のスクロールバー chart.scrollbarY = new am4core.Scrollbar();
凡例
・グラフのシリーズごとにマーカーをつける
See the Pen amChart5 by suzuyosy (@suzuyosy) on CodePen.dark
※ポイント
// マーカーを配置する
chart.legend = new am4charts.Legend();
// デフォルトの正方形のマーカーを使用
chart.legend.useDefaultMarker = true;
// マーカーの設定
var marker = chart.legend.markers.template.children.getIndex(0);
// マーカーの形を円にする
marker.cornerRadius(12, 12, 12, 12);
// マーカーの枠の太さ
marker.strokeWidth = 2;
// マーカーの枠の透過度
marker.strokeOpacity = 1;
// マーカーの枠の色
marker.stroke = am4core.color("#ccc");
// マーカーの幅
marker.width = 24
// マーカーの高さ
marker.height = 24
// マーカーの名前
series2.name = "value";
// グラフを縦積みにする
series2.stacked = true;
アニメーション
・グラフにアニメーションをつける(テーマを使うと簡単)
See the Pen amChart6 by suzuyosy (@suzuyosy) on CodePen.dark
※ポイント
・アニメーションテーマを使うと簡単に設定してくれる - html <script src="//www.amcharts.com/lib/4/themes/animated.js"></script> - js am4core.useTheme(am4themes_animated); ・手動で設定 // グラフ表示時のデュレイション series.defaultState.transitionDuration = 5000; // グラフ非表示時のデュレイション series.hiddenState.transitionDuration = 5000; // ツールチップの移動アニメーション series2.tooltip.animationDuration = 500;
色
・グラフの色を変える(カラーテーマがいくつかあるので紹介)
See the Pen amChart7 by suzuyosy (@suzuyosy) on CodePen.dark
※ポイント
・カラーテーマ（使うものを一つずつ） - html <script src="https://cdn.amcharts.com/lib/4/themes/dataviz.js"></script> <script src="https://cdn.amcharts.com/lib/4/themes/material.js"></script> <script src="https://cdn.amcharts.com/lib/4/themes/kelly.js"></script> - js am4core.useTheme(am4themes_dataviz); am4core.useTheme(am4themes_material); am4core.useTheme(am4themes_kelly);
※テーマは他にもたくさんあります。
カラーテーマ
今回はXYChartの使い方をいくつかピックアップしてメモしました。
まだまだ使えるグラフや設定などたくさんあるので、
ぜひ調べてみてください！
以上、よろしくお願いいたします。