AmchartsのTips

最近のプロジェクトでAmcharts(https://www.amcharts.com/)を使っていたが、
ドキュメントの内容がイマイチ、かつ日本語の情報が少なく苦労したので、備忘録を兼ねて記載しておく。

• makeChartの戻り値でグラフのインスタンスを取得できるが、renderedイベントの発火時にインスタンスを取得する方が良い。

  • makeChartの呼び出しが終わった時点では、インスタンスの内容(graphsプロパティなど)が不十分な状態でインスタンスを受け取ることがある。

• ガントチャートの描画の設定項目の増やし方

    "graph": {
        "alphaField": "fillAlphas",　// グラフの透過度
        "bulletField": "bullet",　　 // バレットタイプの追加
        "bulletSizeField": "bulletSize",　// バレットサイズの追加
    },
    "categoryField": "category",　// 行タイトル
    "colorField": "fillColors",　// グラフの色
    "startField": "start",　// ガント線の開始時間 or 日時
    "endField": "end",　// ガント線の終了時間 or 日時
    "durationField": "duration",　// ガント線の長さ (2時間など)
    "dataProvider": [ {
        "category": "John",
        "segments": [ {
            "start": 7,
            "duration": 2,
            "fillColors": "#46615e",
            "task": "Task #1"
        }, {

• グラフのマージンに関わらない変更はmakeChartをやり直さず、validateNowでやった方が軽い。

• 「usePrefixes:true」をJSONに指定することで、桁の大きい数字を自動的に小さくできる。

  • 例：1,000,000 -> 1M

• exportプラグインを使うとき、captureメソッドの引数に「backgroundColor: (色コード)」を渡すと、Annotateモードや画像ダウンロード時の背景色を変えられる。