react-chartjs - 显示所有数据点的折线图，而不仅仅是悬停时

Question

我正在尝试在 React 中创建一个基本的折线图。据我了解，默认情况下，Chartjs 将在悬停时显示数据点，但由于某种原因，每个数据点都显示在图表上，这并不理想，因为会有数千个数据点。

据我所知，Chartjs 中折线图的默认行为是在悬停时显示数据。我尝试过像这样禁用工具提示：

options: {
    tooltips: {
         enabled: false
    }
}

我还尝试直接复制粘贴来自 react-chartjs 的示例代码并插入我自己的数据，但我仍然显示所有数据点。我不知道该尝试什么，所以提前致谢。这是我的组件：

import { 
  CategoryScale, 
  LineElement, 
  LinearScale, 
  PointElement, 
  TimeScale,
  Legend,
  Title,
  Chart,
  Tooltip 
} from 'chart.js';
import './App.css';
import { Line } from 'react-chartjs-2';
import annotationPlugin from 'chartjs-plugin-annotation';
import ChartDataLabels from 'chartjs-plugin-datalabels';
import 'chartjs-adapter-date-fns';
import { useEffect, useState } from 'react';


Chart.register(
  CategoryScale,
  LinearScale,
  PointElement, 
  LineElement,
  Title,
  annotationPlugin,
  ChartDataLabels,
  TimeScale,
  Legend,
  Tooltip
);




function App() {

  const [ temps, setTemps ] = useState([]);
  const [ times, setTimes ] = useState([]);

  useEffect(() => {
    async function fetchData () {
      const dates = [];
      const temps = [];
      const url = 'data/device1/input_device_1_a.json';
      const response = await fetch(url);
      const data = await response.json();
      for (let i = 0; i < data.length; i++) {
        dates.push(data[i].time);
        temps.push(data[i].tmp);
      }
      setTimes(dates);
      setTemps(temps);
  }
  
  fetchData();
  }, []);

  const chartData = {
    labels: times,
    datasets: [
      {
        label: 'Device 1',
        data: temps,
        borderColor: 'rgb(255, 99, 132)',
        backgroundColor: 'rgba(255, 99, 132, 0.5)',
      },
    ],
  }

  const chartOptions = {
    responsive: true,
    plugins: {
      legend: {
        position: 'top',
      },
      title: {
        display: true,
        text: 'Chart.js Line Chart',
      },
    },
  }

  return (
    <Line data={chartData} options={chartOptions} />
    );
}

export default App;

Answer 1

在 Chart.js 的术语中，这里可能涉及三个不同的概念：

• 工具提示，当您将鼠标悬停在某个点上或附近时，默认情况下会显示一个带有标签的框
• 悬停（例如，线悬停），通常与工具提示一起使用，以在悬停时更改点的样式
• datalabels插件，默认情况下标记每个点（无论是否悬停）

如果您不是特别需要数据标签，最简单的方法是不全局注册它。您仍然可以将它作为插件传递给需要它的特定图表。

如果您只想对某些点或某些数据集使用数据标签，那么您必须检查数据标签文档 - 它有很多选项，包括（为了充分的灵活性）可编写脚本的选项，可以应用您想要的任何逻辑通过 JavaScript 回调。