業務でReactで使えるグラフライブラリ「Recharts」の使い方

業務でReactで使えるグラフライブラリ「Recharts」の使い方

業務でReactで使えるグラフライブラリの「Recharts」を使ったのでその感想とざっくり使い方をご紹介します。

Ads

AreaChart | Recharts

業務でReactで使えるグラフライブラリ「Recharts」の使い方
Recharts

はじめに

現在の業務ではReact + Reduxで B to B 向けサービスの運営に携わっています。基本管理画面っぽい感じなので、兼ねてより分析ツールとして円グラフや棒グラフなんかを入れたいねーって話があったんですが、今回実装することになりました。

以前に、Reactのグラフライブラリを探したのですが、業務ではBarChartStackedBySign | Rechartsを使うことにしました。

使うことに決めた理由としてはGitHubのスターやForkも多いですし、何よりドキュメントがしっかりしているのでこれにしました。

グラフの種類が多いのでこんなにいらないんじゃ・・・みたいに思いがちですが、管理画面系だと後々「こんなグラフ入れたい」「こんなグラフできないの?」とか色々要望が上がるので最初からできる前提で作るのはありかなと。

インストール

npm install recharts

基本的な使い方

シンプルにやろうとすると下記コードでできちゃいます。とはいえ業務レベルで使うとしたら使えるレベルではないですが。

import { LineChart, Line } from 'recharts';


const data = [
  {name: 'Page A', uv: 4000},
  {name: 'Page B', uv: 3000},
  {name: 'Page C', uv: 2000},
  {name: 'Page D', uv: 2780},
  {name: 'Page E', uv: 1890},
  {name: 'Page F', uv: 2390},
  {name: 'Page G', uv: 3490},
]

const SimpleLineChart = React.createClass({
    render () {
    return (
      <LineChart width={400} height={400} data={data}>
        <Line type="monotone" dataKey="uv" stroke="#8884d8" />
      </LineChart>
    )
  }
})

ReactDOM.render(
  <SimpleLineChart />,
  document.getElementById('container')
);

いろんなグラフ

棒グラフ、線グラフ、円グラフなど豊富に用意されています。用途やデータに応じて使い分けできますね。
細かい使い方はSimpleLineChart | Rechartsを参考にするといいと思います。

  • AreaChart
  • BarChart
  • LineChart
  • ComposedChart
  • PieChart
  • RadarChart
  • RadialBarChart
  • ScatterChart
  • Treemap

ResponsiveContainer

レスポンシブに対応させることができます。

const {ResponsiveContainer, PieChart, Pie, Legend} = Recharts;

const data = [
  {name: 'Group A', value: 2400}, {name: 'Group B', value: 4567},
  {name: 'Group C', value: 1398}, {name: 'Group D', value: 9800},
  {name: 'Group E', value: 3908}, {name: 'Group F', value: 4800}
]

const containerStyle = {
  WebkitBoxSizing: 'border-box',
  boxSizing: 'border-box',
  padding: '8px',
  width: '80%',
  height: '330px',
  maxHeight: '330px',
  margin: '0 auto'
}

<div style={containerStyle}>
  <ResponsiveContainer>
    <PieChart>
      <Pie data={data} fill="#8884d8"/>
    </PieChart>
  </ResponsiveContainer>
</div>

注意点は、CSSでwidthとheightを指定するのが肝です。幅と高さを指定されていないとグラフが表示されません。js側にCSS書いていますが、CSSファイルにスタイルを書いても問題ないです。

Legend

エクセルなどでグラフ時に作る場合のいわゆる「凡例」のことです。使い方としては使いたいグラフコンポーネント内に<Legend/>でOKです。ちなみに、色々カスタマイズもできるので試してみるといいと思います。

import {ResponsiveContainer, PieChart, Pie, Legend} from 'Recharts'

const data = [
  {name: 'Group A', value: 2400}, {name: 'Group B', value: 4567},
  {name: 'Group C', value: 1398}, {name: 'Group D', value: 9800},
  {name: 'Group E', value: 3908}, {name: 'Group F', value: 4800}
]

<PieChart>
  <Pie data={data} onClick={this.handleClick.bind(this)} fill="#8884d8"/>
  <Legend/>
</PieChart>

Tooltip

マウスオーバーで値表示してくれます。これもカスタマイズできます。

import {ResponsiveContainer, PieChart, Pie, Legend, Tooltip} from 'Recharts'

const data = [
  {name: 'Group A', value: 2400}, {name: 'Group B', value: 4567},
  {name: 'Group C', value: 1398}, {name: 'Group D', value: 9800},
  {name: 'Group E', value: 3908}, {name: 'Group F', value: 4800}
]

<ResponsiveContainer>
<PieChart>
  <Pie data={data} onClick={this.handleClick.bind(this)} fill="#8884d8"/>
  <Tooltip/>
  <Legend/>
</PieChart>

Cell

主に棒グラフと円グラフで使えるようです。上記まではfill="#8884d8"というようにグラフ全体の色を指定してましたが、値によって色分けした時などありますよね。そんな時にCellを使うと簡単に色分けできます。

COLORSでグラフ内で使う色の配列を作っています。

import {ResponsiveContainer, PieChart, Pie, Legend, Tooltip, Cell} from 'Recharts'

const COLORS = ['#cf7387', '#cf73c3', '#ab73cf', '#7373cf', '#73b2cf', '#73cfb8', '#73cf7a', '#a5cf73', '#cecf73', '#cfb473', '#cfcfcf']

<ResponsiveContainer>
  <PieChart>
    <Pie data={data} onClick={this.handleClick.bind(this)}>
      {
        data.map((entry, index) => <Cell fill={COLORS[index % COLORS.length]}/>)
      }
    </Pie>
    <Tooltip/>
    <Legend/>
  </PieChart>
</ResponsiveContainer>

まとめ

ざっくりご紹介しました。他にもオプションがあったりカスタマイズの方法もあるので、色々試してみたいですね。ただ、ちょっと気になるのが色をいくつも使う場合に、配色のパターンを手作業で作るのは結構大変かなーと思いますね。特にデザインをかじっていない人には難しいかも。配色のパターンがいくつも必要な場合などはカラーコードを計算できるような関数とか作らなければいけないのかも。それはそれで大変そうなので、いつか勉強がてら作ります。

オススメの本



WebデベロッパーのためのReact開発入門 JavaScript UIライブラリの基本と活用

イチからわかる!Reactの仕組みと使い方UIコードの再利用化と速度向上を図る!Reactのコンセプト、コンポーネント、JSX、活用テクニック、一歩進んだ使い方を解説!

いいなと思ったらシェアお願いします

同じタグで検索

Ads

同じカテゴリーの記事

ページの先頭へ