使用 Chart.js 在 React 中进行数据可视化

创建交互式且视觉上有吸引力的图表是开发现代 Web 应用程序的开发人员的一项基本技能。**Chart.js** 是一个流行的数据可视化 JavaScript 库，它提供了一种简单而强大的方法来创建各种类型的图表，例如条形图、折线图、饼图等。当与 React（一种广泛用于构建用户界面的 JavaScript 库）结合使用时，它成为制作动态和响应式可视化的有效工具。在本文中，我们将探讨如何将 Chart.js 集成到 React 项目中并逐步创建令人惊叹的图表。

安装依赖项

npm create vite@latest

在终端提示符下输入**项目名称**，然后选择**react**，并根据自己的喜好调整是否使用**javascript**或typescript**。

npm i chart.js react-chartjs-2

**react-chartjs-2** 库充当 Chart.js 库的 React 包装器。它通过为各种类型的图表（例如 Line、Bar、Pie）提供预构建的 React 组件，简化了将 Chart.js 集成到 React 应用程序的过程。

文件夹结构

删除不需要的文件和文件夹并创建一个组件文件夹。

创建图表组件

在组件文件夹中，创建一个文件来创建图表。

条形图

偷懒的方法

import 'chart.js/auto';
import { Chart } from 'react-chartjs-2';

可摇树的方式

import { Chart } from 'react-chartjs-2';
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend,
} from 'chart.js';

ChartJS.register(
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend
);

将 Chart.js 与 React 集成的两种方法（Lazy 方式和 Tree-shakable 方式）都有各自的优点和权衡。

Lazy 方式使用 import 'chart.js/auto'，实现起来快速而简单。它会自动注册所有必要的 Chart.js 组件，是小型项目或快速原型的绝佳选择。但是，这种方法可能会导致包大小变大，因为它会导入并注册所有 Chart.js 组件，甚至包括您可能不会在应用程序中使用的组件。

另一方面，Tree-shakable 方式通过允许您仅导入和注册所需的 Chart.js 组件来提供更好的优化。这可以减小包大小，从而提高应用程序性能，尤其是在较大或生产级项目中。但是，它需要更多设置和手动管理已注册的组件，这对于初学者或简单用例来说可能更复杂或繁琐。

总而言之，Lazy 方式对于开发的简单性和速度来说是理想的选择，而 Tree-shakable 方式则是性能和捆绑包大小至关重要的生产环境的首选。

但在本文中，为了简单起见，我们将使用懒惰的方法。

import 'chart.js/auto';
import { Chart } from 'react-chartjs-2';

export default function BarChart() {
  const options = {
    responsive: true,
    plugins: {
      title: {
        display: true,
        text: 'Steps taken per day',
      },
    },
  };

  const data = {
    labels: [
      'Sunday',
      'Monday',
      'Tuesday',
      'Wednesday',
      'Thursday',
      'Friday',
      'Saturday',
    ],
    datasets: [
      {
        label: 'John',
        data: [10200, 8212, 9435, 10032, 8756, 10324, 9021],
        backgroundColor: '#ef4444',
      },
      {
        label: 'Jane',
        data: [8010, 9432, 9401, 8790, 10431, 9110, 8833],
        backgroundColor: '#3b82f6',
      },
    ],
  };

  return (
    

      
    
  );
}

react-chartjs-2 中的 Chart 组件需要三个主要属性：type、data 和 options。

`type`：指定要呈现的图表类型，例如条形图、折线图、饼图等。这决定了图表的整体外观和结构。

`data`：包含定义图表显示内容的标签和数据集。例如，在条形图中，数据包括 x 轴上的类别和每个数据集的值。

`options`：配置图表的其他设置，例如响应性、插件（例如标题和工具提示）和布局调整。此属性允许您自定义图表的行为和外观。

这三个属性协同工作，在 React 中创建一个功能齐全且可交互的图表。

甜甜圈图

import 'chart.js/auto';
import { Chart } from 'react-chartjs-2';

export default function DoughnutChart() {
  const options = {
    responsive: true,
    plugins: {
      title: {
        display: true,
        text: 'Gender of students in a class',
      },
    },
  };

  const data = {
    labels: ['Man', 'Woman', 'Other'],
    datasets: [
      {
        label: 'Total',
        data: [45, 50, 5],
        backgroundColor: ['#ef4444', '#3b82f6', '#22c55e'],
      },
    ],
  };

  return (
    

      
    
  );
}

折线图

import 'chart.js/auto';
import { Chart } from 'react-chartjs-2';

export default function LineChart() {
  const options = {
    responsive: true,
    plugins: {
      title: {
        display: true,
        text: 'Steps taken per day',
      },
    },
  };

  const data = {
    labels: [
      'Sunday',
      'Monday',
      'Tuesday',
      'Wednesday',
      'Thursday',
      'Friday',
      'Saturday',
    ],
    datasets: [
      {
        label: 'John',
        data: [10200, 8212, 9435, 10032, 8756, 10324, 9021],
        fill: true,
        backgroundColor: '#ef444450',
        borderColor: '#ef4444',
        tension: 0.5,
      },
      {
        label: 'Jane',
        data: [8010, 9432, 9401, 8790, 10431, 9110, 8833],
        fill: true,
        backgroundColor: '#3b82f650',
        borderColor: '#3b82f6',
        tension: 0.5,
      },
    ],
  };

  return (
    

      
    
  );
}

饼图

import 'chart.js/auto';
import { Chart } from 'react-chartjs-2';

export default function PieChart() {
  const options = {
    responsive: true,
    plugins: {
      title: {
        display: true,
        text: 'Gender of students in a class',
      },
    },
  };

  const data = {
    labels: ['Man', 'Woman', 'Other'],
    datasets: [
      {
        label: 'Total',
        data: [45, 50, 5],
        backgroundColor: ['#ef4444', '#3b82f6', '#22c55e'],
      },
    ],
  };

  return (
    

      
    
  );
}

重构

您还可以将数据移动到新文件中并使用映射显示数据。

//data.ts

export const stepsData = [
  {
    name: 'John',
    steps: [
      {
        day: 'Sunday',
        value: 10200,
      },
      {
        day: 'Monday',
        value: 8212,
      },
      {
        day: 'Tuesday',
        value: 9435,
      },
      {
        day: 'Wednesday',
        value: 10032,
      },
      {
        day: 'Thursday',
        value: 8756,
      },
      {
        day: 'Friday',
        value: 10324,
      },
      {
        day: 'Saturday',
        value: 9021,
      },
    ],
  },
  {
    name: 'Jane',
    steps: [
      {
        day: 'Sunday',
        value: 8010,
      },
      {
        day: 'Monday',
        value: 9432,
      },
      {
        day: 'Tuesday',
        value: 9401,
      },
      {
        day: 'Wednesday',
        value: 8790,
      },
      {
        day: 'Thursday',
        value: 10431,
      },
      {
        day: 'Friday',
        value: 9110,
      },
      {
        day: 'Saturday',
        value: 8833,
      },
    ],
  },
];

import 'chart.js/auto';
import { Chart } from 'react-chartjs-2';
import { stepsData } from '../utils/data';

export default function LineChart() {
  const options = {
    responsive: true,
    plugins: {
      title: {
        display: true,
        text: 'Steps taken per day',
      },
    },
  };

  const labels = stepsData[0]?.steps.map((step) => step.day);

  const datasets = stepsData.map((person) => ({
    label: person.name,
    data: person.steps.map((step) => step.value),
    fill: true,
    tension: 0.5,
  }));

  const data = {
    labels,
    datasets,
  };

  return (
    

      
    
  );
}

结论

在本文中，我们探讨了如何将 Chart.js 与 React 集成以创建视觉上引人入胜且具有交互性的图表，包括条形图、圆环图、折线图和饼图。我希望​​本指南能帮助您开始使用 React 进行数据可视化。如需进一步探索并访问完整代码，请随时查看以下链接中的项目存储库。