【React】チャートライブラリでレーダーチャートを描画させる｜ポートフォリオサイトの作り方
作成日: 更新日:
開発環境
- Visual Studio Code:version 1.73.0
- OS:Windows10
- Node.js:v18.14.0
- npm:9.3.1
- react:18.2.0
- react-dom:18.2.0
- react-router-dom:6.8.2
- typescript:4.9.5
- mui:5.11.10
- mui/icons-material:5.11.11
- chart.js:4.4.0
- react-chartjs-2:5.2.0
Reactでスキルコンテンツにレーダーチャートを描画させる手順
Reactでスキルコンテンツにレーダーチャートを描画させる手順を解説します。
Chart.jsをインストールする
まずはChart.jsをインストールします。 公式サイトのQuickstartにインストールコマンドが用意されていますので、「yarn」「pnpm」「npm」など使用しているパッケージマネージャーに合わせてインストールしてください。
1npm install --save chart.js react-chartjs-2
公式サイト：https://react-chartjs-2.js.org/ また、補足として「react-chartjs-2」は「chart.js」をReactでも使用できるようにしたラッパーライブラリです。
レーダーチャートコンポーネントを作成する
次にレーダーチャートコンポーネントを作成します。
1// react-portfolio-app\src\components\RadarChart.tsx 2import React from 'react'; 3import { 4 Chart as ChartJS, 5 RadialLinearScale, 6 PointElement, 7 LineElement, 8 Filler, 9 Tooltip, 10 Legend, 11} from 'chart.js'; 12import { Radar } from 'react-chartjs-2'; 13 14interface SkillProps { 15 options: any; 16 data: any; 17} 18 19ChartJS.register( 20 RadialLinearScale, 21 PointElement, 22 LineElement, 23 Filler, 24 Tooltip, 25 Legend 26); 27 28const RadarChart: React.FC<SkillProps> = ({ options, data }) => { 29 return( 30 <> 31 <Radar options={options} data={data} /> 32 </> 33 ); 34}; 35 36export default RadarChart;
公式サイトにもRadarChartのサンプルコードがありますので、そちらを参考にするのがおすすめです。 公式サイト：https://react-chartjs-2.js.org/examples/radar-chart また、今回はinterfaceで型を定義し、親コンポーネントから値を受け取れるようにしています。
スキルリストコンポーネントを作成する
次にスキルリストコンポーネントを作成します。
1// react-portfolio-app\src\components\SkillList.tsx 2import React from "react"; 3import Box from "@mui/material/Box"; 4import Grid from "@mui/material/Grid"; 5import Typography from "@mui/material/Typography"; 6import Button from "@mui/material/Button"; 7 8import RadarChart from "./RadarChart" 9 10const SkillList: React.FC = () => { 11 const setSkillLists = [ 12 { 13 labels: ["HTML / CSS ", "SASS / SCSS", "JavaScript", "TypeScript", "React", "Next.js"], 14 datasets: [{ 15 label: "Front-End", 16 data: [3, 3, 2, 2, 2, 2], 17 fill: true, 18 backgroundColor: "rgba(75, 192, 192, 0.2)", 19 borderColor: "rgb(75, 192, 192, 1.0)", 20 }], 21 }, 22 { 23 labels: ["PHP", "Laravel", "Ruby", "Ruby on Rails", "python", "Django"], 24 datasets: [{ 25 label: "Back-End", 26 data: [3, 3, 3, 3, 2, 2], 27 fill: true, 28 backgroundColor: "rgba(54, 162, 235, 0.2)", 29 borderColor: "rgba(54, 162, 235, 1.0)", 30 }] 31 }, 32 { 33 labels: ["AWS", "GCP", "Linux", "Windows", "Nginx", "Apache"], 34 datasets: [{ 35 label: "DevOps", 36 data: [2, 1, 2, 1, 2, 2], 37 fill: true, 38 backgroundColor: "rgba(255, 99, 132, 0.2)", 39 borderColor: "rgba(255, 99, 132, 1.0)", 40 }] 41 } 42 ]; 43 44 const setSkillChartOptions = { 45 responsive: true, 46 maintainAspectRatio: false, 47 plugins: { 48 legend: { 49 display: true 50 } 51 }, 52 scales: { 53 r: { 54 max: 3, 55 min: 0, 56 ticks: { 57 stepSize: 1 58 }, 59 }, 60 } 61 } 62 63 return( 64 <> 65 <Grid container rowSpacing={2} columnSpacing={2}> 66 <Grid item xs={12} md={12} sx={{ textAlign: 'center' }}> 67 <Typography component="h2" variant="h2"> 68 Skill 69 </Typography> 70 </Grid> 71 {setSkillLists.map((data) => { 72 return ( 73 <Grid item xs={12} md={4}> 74 <Box sx={{ width: "100%", height: {xs: "400px", md: "200px"} }}> 75 <RadarChart options={setSkillChartOptions} data={data}/> 76 </Box> 77 </Grid> 78 ); 79 })} 80 <Grid item xs={12} md={12} sx={{ textAlign: 'center' }}> 81 <Button variant="contained" size="large"> 82 LearnMore 83 </Button> 84 </Grid> 85 </Grid> 86 </> 87 ); 88}; 89 90export default SkillList;
「setSkillLists」にレーダーチャートに渡したい値を配列で定義し、mapメソッドで繰り返し処理を行うことで1つずつレーダーチャートコンポーネントに一つずつデータを渡しています。 また、「setSkillChartOptions」はレーダーチャートの表示に関わるプロパティを定義しているため、そのまま「options」に値を渡す形にしています。
トップページコンポーネントを修正する
最後にトップページコンポーネントを修正します。
1// react-portfolio-app\src\pages\homes\top.tsx 2 3import MV from "../../assets/images/mv.jpg" 4+ import SkillList from "../../components/SkillList" 5 6const Top: React.FC = () => { 7 return( 8 <> 9 <Box sx={{ height: "65vh", backgroundImage: "url(" + MV + ")", backgroundSize: "cover", backgroundPosition: "center", position: "relative" }}> 10 <Container maxWidth='md' sx={{ position: "absolute", top: "30%", left: "50%", transform: "translateX(-50%) translateY(-50%)" }}> 11 <Grid container rowSpacing={2} columnSpacing={2} sx={{ textAlign: "center",color: "#FFFFFF", textShadow: "1px 1px 3px #000000" }}> 12 <Grid item xs={12} md={12}> 13 <Typography component="h2" variant="h2"> 14 MVタイトル 15 </Typography> 16 </Grid> 17 <Grid item xs={12} md={12}> 18 <Typography> 19 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト 20 </Typography> 21 </Grid> 22 </Grid> 23 </Container> 24 <Button variant="contained" size="large" sx={{ position: "absolute", bottom: "10%", left: "50%", transform: "translateX(-50%)" }}> 25 LearnMore 26 </Button> 27 </Box> 28+ <Box> 29+ <Container maxWidth='md'> 30+ <SkillList /> 31+ </Container> 32+ </Box> 33 <Box> 34 <Container maxWidth='md'>
SkillListコンポーネントをインポートし、スキルコンテンツでSkillListコンポーネントを呼び出す形にしています。
おわりに
Reactでスキルコンテンツにレーダーチャートを描画させる手順を解説してきましたが、いかがだったでしょうか。 ほかにもチャートライブラリは「Recharts」「react-apexcharts」「victory」などがありますが、一番メジャーな「react-chartjs-2」が個人的にはおすすめです。 是非、Reactでチャートライブラリを使いこなして、おしゃれなデザインにしていきましょう。