Reactjs-条形图-chartjs-数据不在单个块中

npm install chart.js react-chartjs-2

import React from 'react';
import { Bar } from 'react-chartjs-2';

const BarChart = () => {
  const data = {
    labels: ['数据1', '数据2', '数据3'],
    datasets: [
      {
        label: '数据集1',
        data: [10, 15, 8],
        backgroundColor: 'rgba(75, 192, 192, 0.6)',
      },
      {
        label: '数据集2',
        data: [5, 12, 6],
        backgroundColor: 'rgba(255, 99, 132, 0.6)',
      },
    ],
  };

  const options = {
    scales: {
      y: {
        beginAtZero: true,
      },
    },
  };

  return <Bar data={data} options={options} />;
};

export default BarChart;

import React from 'react';
import BarChart from './BarChart';

const App = () => {
  return (
    <div>
      <h1>条形图示例</h1>
      <BarChart />
    </div>
  );
};

export default App;