Reactでレーダチャートを作成する方法を優しく解説[Recharts]

2020年4月13日

ReactはコンポーネントでUIを組み立てていきます。今回紹介するRechartsというライブラリは棒グラフや円グラフなどのグラフをコンポーネントとして配布してくれています。

その配布されているグラフコンポーネントの中にはレーダチャートが含まれており、とても簡単にレーダチャートを作成することができます。

この記事ではRechartsライブラリをインストールするところからレーダチャートを作成する方法まで優しく解説します。

Rechartsインストール方法

npmかyarnを使うと簡単にインストールが完了します。どちらの場合も作業を行うプロジェクトのリポジトリで実行してください。

npmを使う場合

npm install recharts

yarnを使う場合

yarn add recharts

参考ページ:Recharts installation

レーダーチャート作成方法

サンプルのコードと表示されるものを提示します。各種コンポーネントとパラメータの説明はコード内にコメントとして記述します。

完成したレーダチャート

この記事のトップ画像と同じです。

サンプルコード

// 各種ライブラリのインポート
import React, { PureComponent } from 'react';
import {
    Radar, RadarChart, PolarGrid, Legend,
    PolarAngleAxis, PolarRadiusAxis,
} from 'recharts';

// 表示するデータを配列として定義
const data = [
    {subject: '数学', A: 120, B: 110, fullMark: 150},
    {subject: '中国語', A: 98, B: 130, fullMark: 150},
    {subject: '英語', A: 86, B: 130, fullMark: 150},
    {subject: '地理', A: 99, B: 100, fullMark: 150},
    {subject: '化学', A: 85, B: 90, fullMark: 150},
    {subject: '歴史', A: 65, B: 85, fullMark: 150},
];

// Chartコンポーネントの定義
export default class Chart extends PureComponent {
    render() {
        return (
            <RadarChart  // レーダーチャート全体の設定を記述
                cx={250}  // 要素の左端とチャートの中心点との距離(0にするとチャートの左半分が隠れる)
                cy={250}  // 要素の上部とチャートの中心点との距離(0にするとチャートの上半分が隠れる)
                outerRadius={150}  // レーダーチャート全体の大きさ  
                width={500}  // レーダーチャートが記載される幅(この幅よりチャートが大きい場合、はみ出た箇所は表示されない)
                height={500}   // レーダーチャートが記載される高さ
                data={data}  // 表示対象のデータ
            >
                {/* レーダーチャートの蜘蛛の巣のような線 */}
                <PolarGrid />
                {/* 項目を決めるデータのキー(サンプルでいう数学や歴史) */}
                <PolarAngleAxis dataKey="subject" />
                
                {/* 目安となる数値が表示される線を指定  */}
                <PolarRadiusAxis 
                    angle={30}  // 中心点から水平を0°とした時の角度 垂直にしたいなら90を指定
                    domain={[0, 150]}  // リストの1番目の要素が最小値、2番目の要素が最大値
                />  
                
                {/* レーダーを表示 */}
                <Radar 
                    name="Aさん"  // そのチャートが誰のデータか指定(チャート下にここで指定した値が表示される)
                    dataKey="A"   // 表示する値と対応するdata内のキー
                    stroke="#8884d8"  // レーダーの外枠の色
                    fill="#8884d8"  // レーダー内の色
                    fillOpacity={0.6}  // レーダー内の色の濃さ(1にすると濃さMAX)
                />
                {/* 2個目のレーダー */}
                <Radar name="Bさん" dataKey="B" stroke="#82ca9d" fill="#82ca9d" fillOpacity={0.6} />

                {/* グラフの下のAさんBさんの表記 */}
                <Legend />
            </RadarChart>
        );
    }
}

あとはこのChartコンポーネントを<Chart />と呼び出せば、サンプルとしてお見せしたレーダーチャートが表示されます。

おまけ: PureComponentを使った理由

レーダーチャートを表示するコンポーネントをComponentではなくPureComponentを継承して作成しています。これはレーダーチャートの要素があまり変更(再レンダリング)されないことを前提として作っています。

画面に表示されているある値が頻繁に更新され、それに伴いレーダーチャートの形を変更する必要があるのであれば、PureConponentではなくConponentを継承したコンポーネントクラスを作成する方が良いです。

詳しいことは以下のサイトで述べられています。

[React] Component と PureComponentの違い – Qiita

まとめ

コードは長く見えますが、コメントを入れることにより改行が増えているだけで、実際はそこまで長いコードではありません。

コメントとして記載した説明を読んでいただければレーダーチャートは作れると思います。是非色んなレーダーチャートを作って遊んでみてください。

参考サイト