ドーナツとパイグラフによるデータ表示

今日、我々は非常に使いやすく、非常に便利なデータの視覚的表現になる反応NPMパッケージChartJS - 2を介してドーナツチャートと円グラフを使用してデータを表示する探索します.Rechart - chartJS - 2パッケージについてのさらなる情報は、here
では、次のコマンドを使用して新しい反応アプリを作成することから始めましょう.

npx create-react-app react_charts_app

アプリケーションが作成された後、我々は我々のアプリケーションの端末で次のコマンドを入力してchartjs依存関係をインストールする必要があります:

npm i react-chartjs-2 chart.js

ここで、'コンポーネント'フォルダを作成します.

ドーナツ.JS

ピエロ.JS

これらは、グラフの形式でデータを表示するすべてのコードを記述する2つのファイルです.
ドーナツから始めましょう.JSと空の機能コンポーネントを作成するには、また、あなたのファイルの非常に上部にあるReact - chartJS - 2からドーナツコンポーネントをインポートすることを忘れないでください.

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

function DoughnutChart() {
    return (
        <div>
           <h1>Creating a Doughnut Chart</h1>
        </div>
    )
}

export default DoughnutChart

今、私たちはドーナツを形成するためにいくつかのデータを追加します、そして、これのために我々は我々のグラフのためにラベルを含んでいるデータオブジェクトを定義する必要があります、そして、次のようにドーナツのスライスを形成するために値、境界線と背景色を定義します

const data = {
    labels: ['Mon','Tue','Wed','Thurs','Fri'],
    datasets: [
        {
            label: 'Attendance for Week 1',
            data: [25,24,25,25,3],
            borderColor: ['rgba(255,206,86,0.2)'],
            backgroundColor: ['rgba(232,99,132,1)',
            'rgba(232,211,6,1)',
            'rgba(54,162,235,1)',
            'rgba(255,159,64,1)',
            'rgba(153,102,255,1)' ],
            pointBackgroundColor: 'rgba(255,206,86,0.2)',
        }

    ]
}

以下のような方法でグラフを追加できます.

const options = {
    plugins: {
        title: {
            display: true,
            text: 'Doughnut Chart',
            color:'blue',
            font: {
                size:34
            },
            padding:{
                top:30,
                bottom:30
            },
            responsive:true,
            animation:{
                animateScale: true,
                           }
        }
    }

}

以下のオプションについて説明します.

タイトル:あなたのグラフの見出しに対応する

色:タイトルテキストのフォント色に対応する、

フォントサイズ:タイトルのサイズに対応する

タイトルのトップ/底にパッドを入れている

Response :我々のグラフが異なる装置で良いようになるのは本当です、

AnimatScale : true --グラフロード

でクールなアニメーション効果を与えます
さて、戻り値のステートメントでドーナツコンポーネントを呼び出し、データとオプションのプロップを渡してchartjs magicを参照します.

return (
      <div>
          <Doughnut data={data} options={options} />
      </div>
    )

また、アプリケーションでドーナツコンポーネントを呼び出す必要があります.jsファイル

import './App.css';
import DoughnutChart from './components/Doughnut'

function App() {
  return (
    <div className="App">
      <div className="container">
    <DoughnutChart /> 
      </div>

    </div>
  );
}

export default App;

NPMスタートコマンドを実行してグラフの出力を見ることができます.

パイチャートの作成はドーナツに似ていますが、ドーナツの名前をパイで置き換える必要があります.

このアプリのための完全なコードは、hereを見つけることができます
それは今日のすべてです..
ハッピーコーディング