如何将react-charts-js-2中的图表拆分为两组数据集

Question

我不久前就能够生成该分割，但我不记得我是怎么做到的（呵呵）我知道如何绘制两组数据库的数据，但我希望在视觉上分割它们，这样它们就不会看起来没有联系

这是我的组件

import React from 'react';
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
} from 'chart.js';
import { Line } from 'react-chartjs-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',
    },
  },
};

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


export const data = {
  labels,
  datasets: [
    {
      label: 'Dataset 1',
      data: labels.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 })),
      borderColor: 'rgb(53, 162, 235)',
      backgroundColor: 'rgba(53, 162, 235, 0.5)',
    },
  ],
};

export const data2 = {
  labels:[...labels, ...labels2],
  datasets: [
    {
      label: 'Dataset 1',
      data: [
        ...labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
        ...labels2.map(() => faker.datatype.number({ min: -1000, max: 1000 }))
      ],
      borderColor: 'rgb(255, 99, 132)',
      backgroundColor: 'rgba(255, 99, 132, 0.5)',
      snapGap: true
    },
    {
      label: 'Dataset 2',
      data: [
        ...labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })), 
        ...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} />;
}

你可以使用它CODESANDBOX

正如您在我的代码和框中看到的，数据集是联合的。是的，。我知道我将它们连接到一个数组中，但我确实记得这样做过。事实上，其中一些代码是从我的其他项目复制的，我成功地将它们在图表内分割

这是我曾经做过的事情的屏幕截图，并希望再次做。 <-- this link expires 1/31/2024 @11:59PM EST So, if you don't see it, that's why. Stack is not allowing images at the moment

无论如何，关于如何分割设计有什么想法吗？将硬编码的幽灵值添加到数据数组中？ CSS？ JS？

我正在使用Vite React和charts.js以及react-charts-js-2

Answer 1

这就是您要找的东西？我们有 2 个图表数据

data

和

data2

，如上面代码中所述。我返回父级

div

和 2 个

Line

组件，其中包含 2 个不同的数据。

export function App() {
  return <>
    <div style={{display:"inline}}>
     <Line options={options} data={data} />
    </div>
    <div style={{display:"inline}}>
     <Line options={options} data={data2} />
    </div>
  </>;
}