Reactでチャート出すならreact-google-charts #React

react-google-chartsっていうReact用のチャートライブラリがある
- 公式サイト
- GitHubページ

Google ChartsっていうGoogle製のチャートライブラリ (以下本家と表現する) があり、react-google-chartsはこれのReact用ラッパー。コンポーネントをimportしてJSXで利用できるようになる

本家がGoogle製だということもあり、結構無理なデータの入れ方をしてもそれなりにいい感じで調整してくれる。チャート系のライブラリはUIが崩れやすかったりするが、このライブラリは比較的強いと思う

導入

ライブラリをインストール (npm install react-google-charts) して下記な感じでコンポーネント書けばOK

HogeChart.jsx

// @flow
import React from "react"
import { Chart } from "react-google-charts"

type Props = {
  data: *,
  graphId: string,
  height: string,
  options: *,
  width: string,
}

export default ({ data, graphId, height, options, width }: Props) =>
  <div>
    <Chart
      chartType="PieChart"
      data={data}
      graph_id={graphId}
      height={height}
      options={options}
      width={width}
    />
  </div>

実装したいチャート別にoptions等を固定値にして、別々の名前でexportしておけば使いやすいと思う

型定義もコンポーネント別に詳細化すれば安全なものができると思う

カスタマイズ

基本的な使い方としては、本家のstyleで設定している部分 (heightやwidth) やdrawChart関数内で設定している値 (ラベルやデータ) を、react-google-chartsではコンポーネントのpropsとして渡すようなイメージ

propsに設定できるパラメータと型はここで確認できる

公式サイトにStoryBook的な感じで触れるデモページがあり、JSON形式でpropsの値を変えながら挙動を確認することができる

例えば本家PieChartsでのExploding a Sliceを実装したければ、本家のdataとoptionsで定義されている部分をデモにコピペしてあげれば確認できる (JSをJSON形式にするので若干手間ではあるが)

入れたJSONはこんな感じ

{"chartType":"PieChart","width":"100%","data":[["Language","Speakers (in millions)"],["Assamese",13],["Bengali",83],["Bodo",1.4],["Dogri",2.3],["Gujarati",46],["Hindi",300],["Kannada",38],["Kashmiri",5.5],["Konkani",5],["Maithili",20],["Malayalam",33],["Manipuri",1.5],["Marathi",72],["Nepali",2.9],["Oriya",33],["Punjabi",29],["Sanskrit",0.01],["Santhali",6.5],["Sindhi",2.5],["Tamil",61],["Telugu",74],["Urdu",52]],"options":{"title":"Indian Language Use","legend":"none","pieSliceText":"label","slices":{"4":{"offset":0.2},"12":{"offset":0.3},"14":{"offset":0.4},"15":{"offset":0.5}}}}

デモページにないチャートを出せるのか

本家サンプルにあるChart Typesとreact-google-chartsのデモページを比較すると、デモの方が若干サンプルが少ないように見えたので、デモにないものも実装できるのか気になった

例えばOrganization Chartとか、本家のdata内にstyle指定のhtmlとかが入ってて、そこがうまくいくか否か

実際にやってみたが、style部分がうまくいかなかった。dataを端折ってシンプルにしたら一応使えるものではあった

試したJSON (うまくいかず)

{"chartType":"OrgChart","width":"100%","data":[[{"v":"Mike","f":"Mike<div style=\"color:red; font-style:italic\">President</div>"},"","The President"],[{"v":"Jim","f":"Jim<div style=\"color:red; font-style:italic\">Vice President</div>"},"Mike","VP"],["Alice","Mike",""],["Bob","Jim","Bob Sponge"],["Carol","Bob",""]]}

シンプルにしたJSON

{"chartType":"OrgChart","width":"100%","data":[["Mike","","The President"],["Jim","Mike","VP"],["Alice","Mike",""],["Bob","Jim","Bob Sponge"],["Carol","Bob",""]]}

dataの中をうまくすればいけるのかもしれないが、単純にJSON形式にするだけじゃいけないっぽい

issueあげてる人もいるみたい
( https://github.com/RakanNimer/react-google-charts/issues/92 )

結論としては、デモページにサンプルがないチャートについては、導入前に検証した方が良さそうということ

締めの感想

使いやすくて好き
Google LOVE
ライブラリ作成者のRakan Nimerさん LOVE