amCharts4のForce Directed Treeでデザインをカスタマイズ

amCharts4のForce Directed Treeではデザインのカスタマイズも可能なので、よく使われるであろうカスタマイズ方法を紹介します。

前提

前提として以下のような形でForce Directed Treeが宣言されていると想定します。

let chart = am4core.create(
  "chartdiv",
  am4plugins_forceDirected.ForceDirectedTree
);

// 表示するデータ
chart.data = [
  {
    name: "Core",
    children: [
      {
        name: "First",
        children: [
          { name: "A1", value: 100 },
          { name: "A2", value: 60 }
        ]
      },
      { ...省略   }
    ]
  }
];


var networkSeries = chart.series.push(
  new am4plugins_forceDirected.ForceDirectedSeries()
);
// 以下にnetworkSeriesの設定が書かれているとする

ノードの色を変更

デフォルトでもオシャレな色ですが、カスタマイズも出来ます。

まずはデフォルトの色合いはこんな感じ。

これをカスタマイズします。

チャートのseriesを設定するところで

networkSeries.colors.list = [
   am4core.color("#6A1B9A"),
   am4core.color("#283593"),
   am4core.color("#0277BD"),
   am4core.color("#00695C")
];

とすることでノードの色を変更することができます。

このようになります。

ツールチップカスタマイズ

ノードにカーソルを当てるとこのようにツールチップが表示されます。

デフォルトでは文字カラーは自動で黒になったり、白になったりします。background-colorはノードの色でフォントは白と統一したい場合は、

networkSeries.tooltip.autoTextColor = false;
networkSeries.tooltip.label.fill = am4core.color("#FFFFFF");

とします。以下の画像のようになります。

ロード時にどれだけノードを展開するか

デフォルトでは全てのノードを展開しますが、maxLevelsを指定することで展開するノードの階層を調整することが出来る。

networkSeries.maxLevels = 2;

とすると2階層までのノードを展開するようになる。

ノードの位置を固定する

デフォルトではノードをドラッグして動かすことが出来るのですが、必要ではないという方も多いと思います。以下のように指定すると中心のノードだけを固定することが出来ます。

    chart.data[0].fixed = true;
    networkSeries.dataFields.fixed = "fixed";

このようにすることで固定させることができます。また位置を具体的に指定することも出来ます。

chart.data[0].x = am4core.percent(20);
chart.data[0].y = am4core.percent(60);
networkSeries.nodes.template.propertyFields.x = "x";
networkSeries.nodes.template.propertyFields.y = "y";

これらは以下のようにデータ自身に含ませる事もできます。

chart.data = [
   {
     name: "Core",
     fixed: true,
     x: am4core.percent(20),
     y: am4core.percent(60),
     children: [
       { ... 以下略


// ただしこの宣言は必要です
networkSeries.dataFields.fixed = "fixed";
networkSeries.nodes.template.propertyFields.x = "x";
networkSeries.nodes.template.propertyFields.y = "y";

まとめ

今回はamCharts4(Force Directed Tree)でのデザインのカスタマイズ方法を紹介しました。

他にも様々なカスタマイズ方法が公式ドキュメントでは紹介されていますので、気になった方はそちらを参照してみてください。