【React】チャートライブラリでレーダーチャートを描画させる｜ポートフォリオサイトの作り方

動画で解説を見る

1 開発環境
2 Reactでスキルコンテンツにレーダーチャートを描画させる手順
3 おわりに

開発環境

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」など使用しているパッケージマネージャーに合わせてインストールしてください。

npm install --save chart.js react-chartjs-2

1	npm install --save chart.js react-chartjs-2

公式サイト：https://react-chartjs-2.js.org/

また、補足として「react-chartjs-2」は「chart.js」をReactでも使用できるようにしたラッパーライブラリです。

レーダーチャートコンポーネントを作成する

次にレーダーチャートコンポーネントを作成します。

import React from 'react';
import {
    Chart as ChartJS,
    RadialLinearScale,
    PointElement,
    LineElement,
    Filler,
    Tooltip,
    Legend,
} from 'chart.js';
import { Radar } from 'react-chartjs-2';

interface SkillProps {
    options: any;
    data: any;
}

ChartJS.register(
    RadialLinearScale,
    PointElement,
    LineElement,
    Filler,
    Tooltip,
    Legend
);

const RadarChart: React.FC<SkillProps> = ({ options, data }) => {
    return(
        <>
            <Radar options={options} data={data} />
        </>
    );
};

export default RadarChart;

import React from 'react';

import {

Chart as ChartJS,

RadialLinearScale,

PointElement,

LineElement,

Filler,

Tooltip,

Legend,

} from 'chart.js';

import { Radar } from 'react-chartjs-2';

interface SkillProps {

options: any;

data: any;

}

ChartJS.register(

RadialLinearScale,

PointElement,

LineElement,

Filler,

Tooltip,

Legend

);

const RadarChart: React.FC<SkillProps> = ({ options, data }) => {

return(

</>

);

};

export default RadarChart;

公式サイトにもRadarChartのサンプルコードがありますので、そちらを参考にするのがおすすめです。

公式サイト：https://react-chartjs-2.js.org/examples/radar-chart

また、今回はinterfaceで型を定義し、親コンポーネントから値を受け取れるようにしています。

スキルリストコンポーネントを作成する

次にスキルリストコンポーネントを作成します。

import React from "react";
import Box from "@mui/material/Box";
import Grid from "@mui/material/Grid";
import Typography from "@mui/material/Typography";
import Button from "@mui/material/Button";

import RadarChart from "./RadarChart"

const SkillList: React.FC = () => {
    const setSkillLists = [
        {
            labels: ["HTML / CSS ", "SASS / SCSS", "JavaScript", "TypeScript", "React", "Next.js"],
            datasets: [{
                label: "Front-End",
                data: [3, 3, 2, 2, 2, 2],
                fill: true,
                backgroundColor: "rgba(75, 192, 192, 0.2)",
                borderColor: "rgb(75, 192, 192, 1.0)",
            }],
        },
        {
            labels: ["PHP", "Laravel", "Ruby", "Ruby on Rails", "python", "Django"],
            datasets: [{
                label: "Back-End",
                data: [3, 3, 3, 3, 2, 2],
                fill: true,
                backgroundColor: "rgba(54, 162, 235, 0.2)",
                borderColor: "rgba(54, 162, 235, 1.0)",
            }]
        },
        {
            labels: ["AWS", "GCP", "Linux", "Windows", "Nginx", "Apache"],
            datasets: [{
                label: "DevOps",
                data: [2, 1, 2, 1, 2, 2],
                fill: true,
                backgroundColor: "rgba(255, 99, 132, 0.2)",
                borderColor: "rgba(255, 99, 132, 1.0)",
            }]
        }
    ];

    const setSkillChartOptions = {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                display: true
            }
        },
        scales: {
            r: {
                max: 3,
                min: 0,
                ticks: {
                    stepSize: 1
                },
            },
        }
    }

    return(
        <>
            <Grid container rowSpacing={2} columnSpacing={2}>
                <Grid item xs={12} md={12} sx={{ textAlign: 'center' }}>
                    <Typography component="h2" variant="h2">
                        Skill
                    </Typography>
                </Grid>
                {setSkillLists.map((data) => {
                    return (
                        <Grid item xs={12} md={4}>
                            <Box sx={{ width: "100%", height: {xs: "400px", md: "200px"} }}>
                                <RadarChart options={setSkillChartOptions} data={data}/>
                            </Box>
                        </Grid>
                    );
                })}
                <Grid item xs={12} md={12} sx={{ textAlign: 'center' }}>
                    <Button variant="contained" size="large">
                        LearnMore
                    </Button>
                </Grid>
            </Grid>
        </>
    );
};

export default SkillList;

import React from "react";

import Box from "@mui/material/Box";

import Grid from "@mui/material/Grid";

import Typography from "@mui/material/Typography";

import Button from "@mui/material/Button";

import RadarChart from "./RadarChart"

const SkillList: React.FC = () => {

const setSkillLists = [

{

labels: ["HTML / CSS ", "SASS / SCSS", "JavaScript", "TypeScript", "React", "Next.js"],

datasets: [{

label: "Front-End",

data: [3, 3, 2, 2, 2, 2],

fill: true,

backgroundColor: "rgba(75, 192, 192, 0.2)",

borderColor: "rgb(75, 192, 192, 1.0)",

}],

{

labels: ["PHP", "Laravel", "Ruby", "Ruby on Rails", "python", "Django"],

datasets: [{

label: "Back-End",

data: [3, 3, 3, 3, 2, 2],

fill: true,

backgroundColor: "rgba(54, 162, 235, 0.2)",

borderColor: "rgba(54, 162, 235, 1.0)",

}]

{

labels: ["AWS", "GCP", "Linux", "Windows", "Nginx", "Apache"],

datasets: [{

label: "DevOps",

data: [2, 1, 2, 1, 2, 2],

fill: true,

backgroundColor: "rgba(255, 99, 132, 0.2)",

borderColor: "rgba(255, 99, 132, 1.0)",

}]

}

];

const setSkillChartOptions = {

responsive: true,

maintainAspectRatio: false,

plugins: {

legend: {

display: true

}

scales: {

r: {

max: 3,

min: 0,

ticks: {

stepSize: 1

}

return(

Skill

</Typography>

</Grid>

{setSkillLists.map((data) => {

return (

</Box>

</Grid>

);

})}

LearnMore

</Button>

</Grid>

</>

);

};

export default SkillList;

「setSkillLists」にレーダーチャートに渡したい値を配列で定義し、mapメソッドで繰り返し処理を行うことで1つずつレーダーチャートコンポーネントに一つずつデータを渡しています。

また、「setSkillChartOptions」はレーダーチャートの表示に関わるプロパティを定義しているため、そのまま「options」に値を渡す形にしています。

トップページコンポーネントを修正する

最後にトップページコンポーネントを修正します。

import React from "react";
import Box from "@mui/material/Box";
import Container from "@mui/material/Container";
import Grid from "@mui/material/Grid";
import Typography from "@mui/material/Typography";
import Button from "@mui/material/Button";

import MV from "../../assets/images/mv.jpg"
import SkillList from "../../components/SkillList"

const Top: React.FC = () => {
    return(
        <>
            <Box sx={{ height: "65vh", backgroundImage: "url(" + MV + ")", backgroundSize: "cover", backgroundPosition: "center", position: "relative" }}>
                <Container maxWidth='md' sx={{ position: "absolute", top: "30%", left: "50%", transform: "translateX(-50%) translateY(-50%)" }}>
                    <Grid container rowSpacing={2} columnSpacing={2} sx={{ textAlign: "center",color: "#FFFFFF", textShadow: "1px 1px 3px #000000" }}>
                        <Grid item xs={12} md={12}>
                            <Typography component="h2" variant="h2">
                                MVタイトル
                            </Typography>
                        </Grid>
                        <Grid item xs={12} md={12}>
                            <Typography>
                                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
                            </Typography>
                        </Grid>
                    </Grid>
                </Container>
                <Button variant="contained" size="large" sx={{ position: "absolute", bottom: "10%", left: "50%", transform: "translateX(-50%)" }}>
                    LearnMore
                </Button>
            </Box>
            <Box>
                <Container maxWidth='md'>
                    <SkillList />
                </Container>
            </Box>
            <Box>
                <Container maxWidth='md'>
                    <Grid container rowSpacing={2} columnSpacing={2}>
                        <Grid item xs={12} md={12} sx={{ textAlign: 'center' }}>
                            <Typography component="h2" variant="h2">
                                Production
                            </Typography>
                        </Grid>
                        <Grid item xs={12} md={4}>
                            <Box sx={{ height: 200, backgroundColor: 'red' }}></Box>
                        </Grid>
                        <Grid item xs={12} md={4}>
                            <Box sx={{ height: 200, backgroundColor: 'red' }}></Box>
                        </Grid>
                        <Grid item xs={12} md={4}>
                            <Box sx={{ height: 200, backgroundColor: 'red' }}></Box>
                        </Grid>
                        <Grid item xs={12} md={12} sx={{ textAlign: 'center' }}>
                            <Button variant="contained" size="large">
                                LearnMore
                            </Button>
                        </Grid>
                    </Grid>
                </Container>
            </Box>
            <Box>
                <Container maxWidth='md'>
                    <Grid container rowSpacing={2} columnSpacing={2}>
                        <Grid item xs={12} md={12} sx={{ textAlign: 'center' }}>
                            <Typography component="h2" variant="h2">
                                Profile
                            </Typography>
                        </Grid>
                        <Grid item xs={12} md={4}>
                            <Box sx={{ height: 200, backgroundColor: 'red' }}></Box>
                        </Grid>
                        <Grid item xs={12} md={8}>
                            <Box sx={{ height: 200, backgroundColor: 'red' }}></Box>
                        </Grid>
                        <Grid item xs={12} md={12} sx={{ textAlign: 'center' }}>
                            <Button variant="contained" size="large">
                                LearnMore
                            </Button>
                        </Grid>
                    </Grid>
                </Container>
            </Box>
            <Box>
                <Container maxWidth='md'>
                    <Grid container rowSpacing={2} columnSpacing={2}>
                        <Grid item xs={12} md={12} sx={{ textAlign: 'center' }}>
                            <Typography component="h2" variant="h2">
                                Contact
                            </Typography>
                        </Grid>
                        <Grid item xs={12} md={12}>
                            <Box sx={{ height: 400, backgroundColor: 'red' }}></Box>
                        </Grid>
                    </Grid>
                </Container>
            </Box>
        </>
    );
};

export default Top;

import MV from "../../assets/images/mv.jpg"

import SkillList from "../../components/SkillList"

const Top: React.FC = () => {

return(

MVタイトル

</Typography>

</Grid>

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

</Typography>

</Grid>

</Container>

LearnMore

</Button>

</Box>

<Box>

</Container>

</Box>

<Box>

SkillListコンポーネントをインポートし、スキルコンテンツでSkillListコンポーネントを呼び出す形にしています。

おわりに

Reactでスキルコンテンツにレーダーチャートを描画させる手順を解説してきましたが、いかがだったでしょうか。

ほかにもチャートライブラリは「Recharts」「react-apexcharts」「victory」などがありますが、一番メジャーな「react-chartjs-2」が個人的にはおすすめです。

是非、Reactでチャートライブラリを使いこなして、おしゃれなデザインにしていきましょう。