如何在react-chartjs-2中制作带堆叠值的折线图？

原问题背景 #

我有一段基于Chart.js编写的代码如下：

const data = {
  datasets: [
    {
      label: 'Dataset #1',
      backgroundColor: 'rgba(255,99,132,0.2)',
      borderColor: 'rgba(255,99,132,1)',
      borderWidth: 2,
      hoverBackgroundColor: 'rgba(255,99,132,0.4)',
      hoverBorderColor: 'rgba(255,99,132,1)',
      data: [
        {
          x: 0,
          y: 5,
        },
        {
          x: 1,
          y: 10,
        },
        {
          x: 1,
          y: 5,
        },
        {
          x: 2,
          y: 10,
        },
      ],
    },
  ],
};

const option = {
  scales: {
    yAxes: [
      {
        stacked: true,
        gridLines: {
          display: true,
          color: 'rgba(255,99,132,0.2)',
        },
      },
    ],
    xAxes: [
      {
        gridLines: {
          display: true,
          color: 'rgba(255,99,132,0.2)',
        },
      },
    ],
  },
  elements: {
    line: {
      tension: 0.1, // bezier curves
    },
  },
};

Chart.Scatter('chart_0', {
  options: option,
  data,
});

这段代码生成了如下图表：

react-chartjs-2是基于Chart.js构建的，请问能否制作出相同的图表？具体如何实现？

解决方案 #

完全可以实现。react-chartjs-2本质是Chart.js的React封装，核心配置逻辑和原生Chart.js完全一致，只需按照React组件的写法调整即可。

实现步骤 #

1. 安装依赖
   首先需要安装react-chartjs-2和它依赖的Chart.js：

   # 使用npm安装
   npm install react-chartjs-2 chart.js
   # 或使用yarn安装
   yarn add react-chartjs-2 chart.js
   

2. 编写React组件
   直接复用原生代码中的data和options配置，通过react-chartjs-2提供的Scatter组件渲染图表：

   import React from 'react';
   import { Scatter } from 'react-chartjs-2';
   
   // 复用原生的data配置
   const data = {
     datasets: [
       {
         label: 'Dataset #1',
         backgroundColor: 'rgba(255,99,132,0.2)',
         borderColor: 'rgba(255,99,132,1)',
         borderWidth: 2,
         hoverBackgroundColor: 'rgba(255,99,132,0.4)',
         hoverBorderColor: 'rgba(255,99,132,1)',
         data: [
           { x: 0, y: 5 },
           { x: 1, y: 10 },
           { x: 1, y: 5 },
           { x: 2, y: 10 },
         ],
       },
     ],
   };
   
   // 复用原生的options配置
   const options = {
     scales: {
       yAxes: [
         {
           stacked: true,
           gridLines: {
             display: true,
             color: 'rgba(255,99,132,0.2)',
           },
         },
       ],
       xAxes: [
         {
           gridLines: {
             display: true,
             color: 'rgba(255,99,132,0.2)',
           },
         },
       ],
     },
     elements: {
       line: {
         tension: 0.1,
       },
     },
   };
   
   const ScatterChart = () => {
     return <Scatter data={data} options={options} />;
   };
   
   export default ScatterChart;
   

3. 版本适配说明

   • 上述代码适配Chart.js v2 + react-chartjs-2 v3版本，对应原生代码的yAxes/xAxes数组格式配置。
   • 如果使用Chart.js v3+ + react-chartjs-2 v4+，需要调整scales配置为v3+的对象格式：

     const options = {
       scales: {
         y: {
           stacked: true,
           grid: {
             display: true,
             color: 'rgba(255,99,132,0.2)',
           },
         },
         x: {
           grid: {
             display: true,
             color: 'rgba(255,99,132,0.2)',
           },
         },
       },
       elements: {
         line: {
           tension: 0.1,
         },
       },
     };
     

效果说明 #

通过上述代码渲染出的图表，和原生Chart.js生成的图表视觉效果、交互逻辑完全一致。

内容的提问来源于stack exchange，提问作者GollyJer