React Native で円グラフを使用する方法

2022 8/18

April 16, 2022 August 18, 2022

今回は React Native で円グラフを使用する方法をご紹介します。
いろいろやり方はありますが、今回は Victory を使用して円グラフを表示してみようと思います。

Victory Pie公式
https://formidable.com/open-source/victory/docs/victory-pie

前提条件

React Native バージョン 0.5 以上
expo ベースで解説します。
何らかの Project を立ち上げ済み

インストール

以下のコマンドでインストールしてください。

expo install victory-native

expo を使用している場合、上記でインストールすることで expo の SDK と互換性のあるいい感じのバージョンのものをインストールできます。

どうしても yarn が良いよって方

yarn add victory-native

npm を使用している場合は下記コマンドでインストールしてください。

npm install --save victory-native

プロジェクトを expo などを使わず React Native で作成している

react-native install react-native-svg

準備完了。簡単ですね

簡単な円グラフを表示してみよう

下記は公式引用のサンプルです。

<VictoryPie
 data={[
     {x: "Cats", y: 3}
     {x: "Dogs", y: 4}
     {x: "Birds", y: 5}
 ]}
>

上記で出力されるグラフは以下です

VictoryPie で円グラフを表示するためには、data というプロパティに値を渡してあげる必要があります。
上記の例では、x がデータを区別する名前、y が実際の値であることがわかります。
なんとなく使用例がイメージできましたね。
ライブラリを使えばここまで簡単にキレイにグラフが表示できるのか〜といった印象です。

実際の使用例

実際に使ってる例を用いて説明します。

こんなグラフを表示したいとします。

ちょっと話題からそれますが、それっぽいデータの作り方も載せます。
上記グラフを表示するコードは以下です。

type pieData = {
  x: string;
  y: number;
};
export const PieChart: React.RC = () => {
  const data: pieData[] = spendingMonth.reduce(
    (result: pieData[], current: Spending) => {
      const element = result.find((p) => p.x === current.category.name);
      if (element) {
        element.y += current.amount;
      } else {
        result.push({
          x: current.category.name,
          y: current.amount,
        });
      }
      return result;
    },
    []
  );
  const dataColor: string[] = data.reduce(
    (result: string[], current: pieData) => {
      const element = categoryArrList.find((p) => p.name === current.x);
      if (element) {
        result.push(element.iconColor);
      }

      return result;
    },
    []
  );
    return (
      <VictoryPie
        colorScale={dataColor}
        data={data}
        padding={{ top: 55, bottom: 45 }}
        height={250}
        labelRadius={80}
        innerRadius={50}
        labels={({ datum }) => `${datum.x}` + "\n\n" + formatMoney(datum.y)}
      />
    )
}

いきなり reduce なども出てきて意味不明だと思いますが、一個ずつ説明します。
まず、サンプルの使用例にて出てきた、VictoryPie に渡すべきデータ型を定義します。

type pieData = {
    x: string;
    y: number;
}

 data={[
     {x: "Cats", y: 3}
     {x: "Dogs", y: 4}
     {x: "Birds", y: 5}
 ]}

上記から実際に data に渡されるのは、pieData[]であることがわかりますね。
では渡す data を作成してみましょう。

  const data: pieData[] = spendingMonth.reduce(
    (result: pieData[], current: Spending) => {
      const element = result.find((p) => p.x === current.category.name);
      if (element) {
        element.y += current.amount;
      } else {
        result.push({
          x: current.category.name,
          y: current.amount,
        });
      }
      return result;
    },
    []
  );

コードで使用されている spendingMonth とは以下のような支払いデータをイメージしてください。
元データ
{id: 1, amount: 10, category: “食費”, categoryColor: “red”},
{id: 2, amount: 20, category: “食費”, categoryColor: “red”},
{id: 3, amount: 30, category: “生活費”, categoryColor: “yellow”},
{id: 4, amount: 40, category: “生活費”, categoryColor: “yellow”},
{id: 5, amount: 50, category: “交通費”, categoryColor: “blue”},

上記のようなデータから、カテゴリ別の下記のようなデータに変換するのが reduce の処理になります。
result
{x: “食費”, y: 30}
{x: “生活費”, y: 70}
{x: “交通費”, y: 50}

reduce を軽く説明すると、既にある配列に特定の処理を実行して、新しい変数を作り出すというものになります。
上記でいうと element が途中データになります。

もし element が result の中になければ result に push、あれば result の同じカテゴリーのy に値を合算していくような処理になります。

グラフの色については data の result に対応した色を string の配列で渡してあげれば ok です。["red", "yellow","green"]

上記で作ったdataと色を定義する文字列配列変数をVitoryPieコンポーネントに渡せば色付きの円グラフの完成です。

最後の仕上げとして、innerRadius や labelRadius などでグラフの内側をくり抜いたりラベルの位置を調整したりしてください。

LGTM!