如何在react-charts-js-2中拆分图表数据集并实现视觉分隔

问题描述 #

在react-chartjs-2中，将两组数据集拼接后，折线图的线条会连接两部分数据，需要实现视觉上的拆分，让同一数据集的两部分线条不相连。当前代码将两组标签和数据直接合并，导致线条连续。

解决方案：插入Null值断开线条 #

Chart.js支持通过在数据中插入null值来断开折线，同时需要保证标签数组与数据数组长度匹配。具体步骤如下：

1. 修改标签数组：在两组标签之间插入一个占位标签（如空字符串），确保标签和数据长度一致。
2. 修改数据集数据：在每组数据集的两部分数据之间插入null，触发Chart.js断开此处的线条。
3. 移除无效配置：删除非标准的snapGap配置项。

修改后的代码示例 #

import React from 'react';
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
} from 'chart.js';
import { Line } from 'react-charts-js-2';
import faker from 'faker';

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

export const options = {
  responsive: true,
  plugins: {
    legend: {
      position: 'top' as const,
    },
    title: {
      display: true,
      text: 'Chart.js Line Chart',
    },
  },
  // 可选：隐藏中间的占位标签
  scales: {
    x: {
      ticks: {
        callback: function(value) {
          const label = this.getLabelForValue(value);
          return label === '' ? null : label;
        }
      }
    }
  }
};

const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
const labels2 = ['1', '2', '3', '4', '5', '6', '7'];

export const data2 = {
  // 在两组标签间插入空字符串占位
  labels:[...labels, '', ...labels2],
  datasets: [
    {
      label: 'Dataset 1',
      data: [
        ...labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
        null, // 插入null断开线条
        ...labels2.map(() => faker.datatype.number({ min: -1000, max: 1000 }))
      ],
      borderColor: 'rgb(255, 99, 132)',
      backgroundColor: 'rgba(255, 99, 132, 0.5)',
    },
    {
      label: 'Dataset 2',
      data: [
        ...labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })), 
        null, // 插入null断开线条
        ...labels2.map(() => faker.datatype.number({ min: -1000, max: 1000 }))
      ],
      borderColor: 'rgb(53, 162, 235)',
      backgroundColor: 'rgba(53, 162, 235, 0.5)',
    },
  ],
};

export function App() {
  return <Line options={options} data={data2} />;
}

原理说明 #

Chart.js的折线图渲染逻辑中，当遇到null、undefined或NaN类型的数据点时，会跳过该点的绘制，并且不会连接前后的有效数据点，从而实现折线的视觉拆分。通过插入占位标签保证数组长度匹配，可选的x轴tick配置可以隐藏中间的占位标签，让图表更整洁。

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