【Laravel】amCharts 4 導入方法と使い方! 俺用メモ!

どうもきよです!

今回はグラフ作成ライブラリのamCharts4について導入方法と使い方をメモしていきます!

下記は公式のデモサイトです!色んなグラフを作成できるので試してみてください!
amChartsデモサイト

今回はXYChartのみサンプルとして使い方をメモしておきます。

スポンサーリンク




■導入方法

・下記から自分に合った方法を選ぶ

・地図を作成する場合は下記もインストールする

これでnode_moduleds内にamCharts4がインストールができる

■使い方

・amChartsのインストールができたので、jsファイルで読み込む(CDNの場合は不要)

・チャートインスタンス作成

※第一引数:DOMのid名(そのdivにグラフが作成される)

※第二引数:chartクラス(ここではXYChartクラス)

■XYChart (X軸とY軸からなるグラフ)

・公式リファレンス
XYChart公式リファレンス

・XYChartを作成する上で必要なもの

チャートインスタンス

データ

※大体上のような感じのデータ構造

※key名は自由でOK

少なくとも2つの軸-垂直と水平

・X軸 = 水平方向 = CategoryAxis

・Y軸 = 垂直方向 = ValueAxis

少なくとも1つのシリーズ

※例として棒グラフ

・シリーズ = どのような見た目のグラフにするか

・XYChartで使えるシリーズ

– 折れ線グラフ = LineSeries

– 棒グラフ = ColumnSeries

– ろうそく? = CandlestickSeries

– 円錐 = ConeSeries

– 波みたいなやつ – CurvedColumnSeries

– 階段上の折れ線グラフ = StepLineSeries

– ちょっとよくわからないグラフ – OHLCSeries

■サンプルコード

See the Pen amchart1 by suzuyosy (@suzuyosy) on CodePen.dark

詳しくはまた別で投稿しようと思います。

以上、よろしくお願いいたします。

スポンサーリンク




シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク




%d人のブロガーが「いいね」をつけました。