読者です 読者をやめる 読者になる 読者になる

Engineer's Way

主にソフトウェア関連について色々書くブログです。

AmchartsのTips

Amcharts JavaScript

 

f:id:matsnow:20170306032523p:plain

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

    "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モードや画像ダウンロード時の背景色を変えられる。