如何将 Chart.js 与 Ionic React 一起使用？

Question

在 Ionic-React 应用程序中，如何使用 chart.js 在任何特定页面上绘制图表。

事实上，这让我很挣扎，所以我想把问题和答案一起发布，以便其他人也可以使用它。

Answer 1

React 是 Ionic 最近添加的框架。 您可以参考以下代码在任何特定页面上显示图表。

1. 首先你需要安装 react-chartjs

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

2. 确保您有与 UI 和框架相关的基本导入

import { IonAvatar, IonButton, IonButtons, IonCard, IonCardContent, 
IonCardHeader, IonCardSubtitle, IonCardTitle, IonContent, IonFab, 
IonFabButton, IonFabList, IonHeader, IonIcon, IonItem, IonItemOption, 
IonItemOptions, IonItemSliding, IonLabel, IonList, IonListHeader, 
IonMenuButton, IonPage, IonText, IonTitle, IonToolbar } from '@ionic/react';

import React, { useState } from 'react';
import './Dashboard.css';
import {addCircle, arrowBackCircle, key, add, addCircleOutline, timeOutline, folderOpen, calendarOutline, cardOutline} from 'ionicons/icons'

3. Chart 相关的导入

import { Line, Bar, Pie , Doughnut} from 'react-chartjs-2';

4. UI 代码/逻辑

const Dashboard: React.FC = (props) => {

//Set Data for Bar Chart. In Realtime you may bing this using the data coming from API or service. 
const barChartData = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
  {
    label: 'My First dataset',
    backgroundColor: 'rgba(255,99,132,0.2)',
    borderColor: 'rgba(255,99,132,1)',
    borderWidth: 1,
    hoverBackgroundColor: 'rgba(255,99,132,0.4)',
    hoverBorderColor: 'rgba(255,99,132,1)',
    data: [65, 59, 80, 81, 56, 55, 40]
  }
]
};

//Set Data for Doughnut Chart. In Realtime you may bing this using the data coming from API or service. 
const doughnutChartData = {
labels: ['Billable', 'Non Billable'],
datasets: [
  {
    label: 'Billable Vs. Non Billable',
    backgroundColor: ['#36a2eb', 'rgba(255,99,132,0.2)'],
    borderColor: 'rgba(255,99,132,1)',
    borderWidth: 1,
    hoverBackgroundColor: 'rgba(255,99,132,0.4)',
    hoverBorderColor: 'rgba(255,99,132,1)',
    data: [65, 59]
  }
]
};


return (
<IonPage>
     <IonHeader>
            <IonToolbar  color="secondary">
                <IonButtons slot="start">
                    <IonMenuButton />
                </IonButtons>
                <IonTitle>Dashboard</IonTitle>
            </IonToolbar>
        </IonHeader>
  <IonContent class="ion-padding">
   
        <IonList>
          <IonItem>
            //Bind the Bar Chart with the Data
            <Bar data={barChartData}
                options={{ maintainAspectRatio: true}}   />
          </IonItem>
          <IonItem>
            <Doughnut data={doughnutChartData}
                options={{ maintainAspectRatio: true}}   />
          </IonItem>
          <IonItem>
            <Pie data={doughnutChartData}
                options={{ maintainAspectRatio: true}}   />
          </IonItem>
        </IonList>

  </IonContent>
</IonPage>
);
};

export default Dashboard;