在react-chartjs-2中的图表和边框图表的点之间添加空格

npm install react-chartjs-2 chart.js

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

const data = {
  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
  datasets: [
    {
      label: 'Dataset',
      data: [65, 59, 80, 81, 56, 55, 40],
      fill: false,
      borderColor: 'rgb(75, 192, 192)',
      tension: 0.1, // 设置曲线的张力，值越小曲线越平滑
      pointStyle: 'circle', // 设置点的样式为圆形
      pointRadius: 5, // 设置点的半径
      pointHoverRadius: 7, // 设置鼠标悬停时点的半径
    },
  ],
};

const options = {
  scales: {
    x: {
      grid: {
        drawOnChartArea: false, // 不绘制网格线在图表区域内部
      },
    },
    y: {
      grid: {
        drawBorder: false, // 不绘制网格线的边框
      },
    },
  },
};

const ChartComponent = () => {
  return (
    <div>
      <Line data={data} options={options} />
    </div>
  );
};