ReactでamCharts4を使う

従来のJavascript環境ではD3.jsなど多くのデータ可視化ライブラリが利用可能でしたが、Reactで使うとなると使うことの出来るライブラリは限られてきます。

色々と探してみたのですが、私はamChartsという可視化ライブラリを使用してみました。

公式サイトは以下のリンクから。

インストール&セットアップ

# npm または yarn でインストール 
npm install @amcharts/amcharts4 
# yarn add @amcharts/amcharts4

まずは必要なライブラリをインポート。今回はマインドマップ的なものを作りたかったのでForce Directed Treeを追加でインポートしています。必要に応じてモジュールをインポートしましょう。

// 必要となるモジュールをインポートする。 
import * as am4core from "@amcharts/amcharts4/core"; 
import * as am4plugins_forceDirected from "@amcharts/amcharts4/plugins/forceDirected"; 
import am4themes_animated from "@amcharts/amcharts4/themes/animated"; 

am4core.useTheme(am4themes_animated);

実装

大まかに言うとcomponentDidMountでデータの取得(必要なら非同期通信で)とグラフの作成を行い、componentWillUnmountでクリーンナップを行います。

基本的には公式ドキュメントの通りにすればそのまま動きます。

class ForceDirectedTree extends Component {
  componentDidMount() {
    let chart = am4core.create(
      "chartdiv",
      am4plugins_forceDirected.ForceDirectedTree
    );

    // 表示するデータ
    chart.data = [
      {
        name: "Core",
        children: [
          {
            name: "First",
            children: [
              { name: "A1", value: 100 },
              { name: "A2", value: 60 }
            ]
          },
          {
            name: "Second",
            children: [
              { name: "B1", value: 135 },
              { name: "B2", value: 98 }
            ]
          },
          // 以下略...
        ]
      }
    ]  
    // 下のコードに続く
     

データに関してはname, childrenという要素が基本になっており、グラフの「葉」のノードはvalueを持っています。

このvalueがノードの大きさを表し、親要素は子要素のvalueの合計になっていきます。

ここからは使用するグラフによって書き方は変わりますが、Force Directed Treeでは一つ以上のseriesというオブジェクトを作成する必要があります。

また、ここでツールチップなどの各種設定を行います。

  // ComponentDidMountの続き
  var networkSeries = chart.series.push(
    new am4plugins_forceDirected.ForceDirectedSeries()
  );
  // ここでデータのkeyを設定する。
  networkSeries.dataFields.value = "value";
  networkSeries.dataFields.name = "name";
  networkSeries.dataFields.children = "children";
  networkSeries.nodes.template.tooltipText = "{name}:{value}";
  networkSeries.nodes.template.fillOpacity = 1;
  networkSeries.manyBodyStrength = -20;
  networkSeries.links.template.strength = 0.8;
  networkSeries.minRadius = am4core.percent(2);
  networkSeries.nodes.template.label.text = "{name}";
  networkSeries.fontSize = 10;

  this.chart = chart;
}

上のコードの中のこの部分がデータのkeyを設定しているところ。value, name, childrenというkeyを設定しています。

networkSeries.dataFields.value = "value";
networkSeries.dataFields.name = "name";
networkSeries.dataFields.children = "children";

例えばデータの数値(valueにあたるもの)がamountというkeyであれば、以下のように書きます。

networkSeries.dataFields.value = "amount";

あとはunmountでクリーンナップを行い、renderメソッド内で描画するためのdiv要素を書くだけ。

componentWillUnmount() {
    if (this.chart) {
      this.chart.dispose();
    }
  }

  render() {
    return (
      <div
        id="chartdiv"
        style={{ width: "100%", height: "550px" }}
      ></div>
    );
  }
}

export default ForceDirectedTree;

完成したグラフ

完成するとこのように綺麗なグラフが表示されます。クリックするとアニメーションでノードの出し入れが出来るのでいい感じです。

まとめ

ReactでamCharts4を使う方法を紹介しました。

イベントリスナーに関することや、ツールチップのカスタマイズは次の記事にします。

今回はForce Directed Treeを使用しましたが、またの機会に別のグラフも使ってみたいです。