React レーダーチャート表示
引き続きポケモンレーダーチャートをReactに移行中！！
elsammit-beginnerblg.hatenablog.com
前回、内部で持っているcsvファイルを読み出せないと書きましたが、、、
解決しました！！
って言っても、フォルダのパスが違っていた。。。orz
それで数時間つぶしてしまったのか。。。泣
これから注意します！！
で、今回はメインどころのレーダーチャートを表示する部分の移行になり実施しました！！
こちらはReact用にライブラリが用意されていたので、そちらの使い方について報告していこうと思います！！
■Reactでレーダーチャートを表示させるためには？
Reactでレーダーチャートや折れ線グラフ、棒グラフなどのグラフを描画するには、
”Recharts”を用いるとよいことがわかりました！！
公式HPはこちらになります。
サンプルコードもあったため、躓かずに進めることができました。
http://recharts.org/en-US
■Rechartsを用いたレーダーチャート実装
まず、Rechartsライブラリをインストールします。
インストールコマンドはこちらになります。
npm install recharts
そして、実装はこんな感じでOKです。
import React, { Component } from 'react';
import {
RadarChart, Tooltip, PolarGrid, PolarAngleAxis, Radar
} from 'recharts';
export default class Cooking extends React.Component {
Radar = () =>{
const dataRadar = [
{ rank: 'HP', poke1: 100, poke2: 200 },
{ rank: '攻撃', poke1: 300, poke2: 100 },
{ rank: '防御', poke1: 150, poke2: 100 },
{ rank: '素早さ', poke1: 300, poke2: 100 },
{ rank: '特防', poke1: 200, poke2: 200 },
{ rank: '特攻', poke1: 100, poke2: 100 },
];
return(<RadarChart // レーダーチャートのサイズや位置、データを指定
height={400} width={500} cx="50%" cy="50%" data={dataRadar} //ここにArray型のデータを指定
>
<PolarGrid />
<PolarAngleAxis
dataKey="rank" //数値を表示したい値のキーを指定
/>
<Radar //レーダーの色や各パラメーターのタイトルを指定
name="pokemon1" //hoverした時に表示される名前を指定
dataKey="poke1" //Array型のデータのパラメータータイトルを指定
stroke="#8884d8" //レーダーの線の色を指定
fill="#8884d8" //レーダーの中身の色を指定
fillOpacity={0.6} //レーダーの中身の色の薄さを指定
/>
<Radar //レーダーの色や各パラメーターのタイトルを指定
name="Mike" //hoverした時に表示される名前を指定
dataKey="poke2" //Array型のデータのパラメータータイトルを指定
stroke="#8884d8" //レーダーの線の色を指定
fill="#A5A5A5A5" //レーダーの中身の色を指定
fillOpacity={0.6} //レーダーの中身の色の薄さを指定
/>
<Tooltip /> //hoverすると各パラメーターの値が表示される
</RadarChart>
);
}
render() {
return (<div>
{this.Radar()}
</div>);
}
}処理内容としてはソースコードに記載した通りですが、
rechartsをimportして、
実行した結果はこんな感じになります。
