React アプリにチャートを追加する方法

チャートは、データを視覚化するための便利で魅力的な方法をユーザーに提供します。データを理解しやすくし、アプリをよりインタラクティブにすることができます。

React でチャートを作成するには、基本的な CSS や React-Vis や React Google Charts などのライブラリを使用するなど、いくつかの方法があります。

CSS を使用して React でチャートを作成する方法

基本的な CSS を使用して React でチャートを作成するのは比較的簡単です。幅と高さを指定して div 要素を作成し、背景色をチャートの目的の色に設定するだけです。例えば：

import React from 'react';


const Chart = () => {
return (
  <div style={{width: '100px', height: '300px', backgroundColor: '#5D6AFF'}}/>
);
}

export default Chart;

上記のコードでは、React ライブラリをインポートしました。次に、幅 100px、高さ 300px、背景色 #5D6AFF の div を返す Chart という関数を作成しました。これにより、青色の背景を持つ基本的なグラフが作成されます。React アプリで Material UI または Tailwind CSS を使用してチャートを作成することもできます。

div 内にテキストまたは画像を含む複数のグラフを作成して、より複雑なグラフを作成することもできます。

import React from 'react';


const Chart = () => {
return (
  <div>
   <div style={{width: '100px', height: '300px', backgroundColor: '#5D6AFF'}}>
    <p>Chart 1</p>
   </div>
   <div style={{width: '100px', height: '300px', backgroundColor: '#FFCF00'}}>
    <img src="https://dummyimage.com/40x80/000/0011ff" style={{padding:'100px 30px'}} />
   </div>
  </div>
);
}

export default Chart;

React-Vis ライブラリを使用した React チャート

React-Vis は Uber が作成したライブラリで、React でチャートやグラフを作成できます。さまざまな形状、色、サイズのチャートを簡単に作成できるコンポーネントのセットを提供します。また、チャートをより魅力的にするのに役立つアニメーションと対話機能もサポートしています。

React-Vis を使用するには、まず基本的な React アプリを作成し、ライブラリをインストールする必要があります。これは、次のコマンドで実行できます。

npm install react-vis

ライブラリをインストールしたら、次のコードを使用して基本的なグラフを作成できます。

import React, { useState } from 'react';


import {
XYPlot,
LineSeries,
VerticalGridLines,
HorizontalGridLines,
XAxis,
YAxis
} from 'react-vis';

export default Chart;

上記のコードは、React および React-Vis ライブラリをインポートします。次に、VerticalGridLines、Horizo​​ntalGridLines、XAxis、YAxis、および LineSeries を含む XYPlot を返す Chart という関数を定義します。LineSeries は、線を構成する点の x 座標と y 座標を含むデータ配列を受け取ります。

React Google チャート ライブラリの使用

React Google Charts は、React で簡単にチャートを作成できるもう 1 つのライブラリです。棒グラフ、円グラフ、折れ線グラフなど、さまざまな種類のグラフを作成するための一連のコンポーネントを提供します。また、チャートをより魅力的にするのに役立つアニメーションと対話機能もサポートしています。

React Google Charts を使用するには、まずライブラリをインストールする必要があります。これは、次のコマンドで実行できます。

npm install react-google-charts

ライブラリをインストールしたら、次のコードを使用して基本的なグラフを作成できます。

import React, { useState } from 'react';
import { Chart } from 'react-google-charts';


const MyChart = () => {
const [data] = useState([
  ['Year', 'Sales', 'Expenses'],
  ['2013', 1000, 400],
  ['2014', 1170, 460],
  ['2015', 660, 1120],
  ['2016', 1030, 540]
]);

export default MyChart;

このコードは、react および react-google-charts ライブラリをインポートします。次に、Chart コンポーネントを返す MyChart という関数を作成します。Chart コンポーネントは、チャートを構成するポイントのラベルと値を含むデータ配列を受け取ります。

CSS を使用するデメリット

CSS を使用して React でチャートを作成することには、いくつかの欠点があります。

• 使いにくい: 複雑なグラフを作成する場合、CSS は使いにくい場合があります。
• あまり柔軟でない: CSS はあまり柔軟ではないため、グラフを変更するのが難しい場合があります。
• 非インタラクティブ: CSS チャートはインタラクティブではないため、ユーザーはそれらを操作できません。

複雑なグラフを作成したい場合は、React-vis と React-google-charts を選択することをお勧めします。ただし、単純なグラフを作成する場合は、CSS が適している場合があります。

React-Vis を使用する利点

React-Vis を使用して React でチャートを作成することには、いくつかの利点があります。

• 使いやすい: React-Vis は使いやすいので、複雑なグラフを簡単に作成できます。
• 高い柔軟性: React-Vis は高い柔軟性を備えているため、チャートを簡単に変更できます。
• インタラクティブ: React-Vis チャートはインタラクティブであるため、ユーザーはそれらを操作できます。
• アニメーション: React-Vis チャートはアニメーションをサポートしているため、チャートをより魅力的にすることができます。

インタラクティブでアニメーション化された複雑なチャートを作成したい場合は、React-Vis が適しています。

React Google チャートを使用する利点

React-Vis と同様に、React Google Charts を使用して React でチャートを作成することにはいくつかの利点があります。

• 使いやすい: React Google Charts は使いやすいので、複雑なグラフを簡単に作成できます。
• さまざまなグラフの種類: React Google Charts にはさまざまな種類のグラフが用意されているため、データに最適なものを選択できます。
• アニメーションのサポート: React Google Charts はアニメーションをサポートしているため、チャートをより魅力的にすることができます。

グラフでユーザー エンゲージメントを高める

グラフはデータを視覚化する優れた方法ですが、グラフを使用してユーザー エンゲージメントを高めることもできます。グラフにアニメーションと対話機能を追加すると、グラフがより魅力的になり、ユーザーがデータをよりよく理解できるようになります。

したがって、React アプリでユーザー エンゲージメントを高める方法を探している場合は、グラフを追加することを検討してください。React アプリを Github のような高速で安全でスケーラブルなプラットフォームにデプロイすることもできます。