この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
プロジェクトセットアップ
Reactプロジェクト生成
npx create-react-app project-name --template typescript
project-name部分に自分のプロジェクト名を書いてください。
ライブラリ追加
npm i chart.js react-chartjs-2
react-chartjs-2にtypeが定義されているので@types/react-chartjs-2じゃなくてreact-chartjs-2を設置してください。
chart.jsはreact-chartjs-2利用するために設置します。
Code example
Graph.tsxをsrc/に作ってください。
// src/Graph.tsx
import { Bar } from 'react-chartjs-2';
const Graph = () => {
const data = {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: 'Dataset',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
}
const options = {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
return (
<Bar
data={data}
width={100}
height={50}
options={options}
/>
);
};
export default Graph;
dataとoptionsはこちらのofficial documentから持ってきました。
src/index.tsxの
<APP />を<Graph />
に変えてください。
// src/index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Graph from './Graph';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<Graph />
</React.StrictMode>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
reportWebVitals()はCRA version 4から出たものです。
reportWebVitals(console.log);
するとTTFB(Time to first byte), FCP(First contentful paint)などのパフォーマンスが確認できます。
Test
npm start
すると自分のブラウザから確認できます。
後は
dataの部分に自分のbackendからデータを持って画面に表示する感じで簡単にできるんだと思います。
Barの形以外にもいろいろあります。
https://www.chartjs.org/docs/master/のChart Typesを確認してください。
他のsettingも上のページから確認してください!
全体のprojectはこちらgithub repoに作りました。
以上です〜。