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

cmssoen2  于 2023-10-18  发布在  Chart.js
关注(0)|答案(1)|浏览(208)

我正在尝试在React中创建一个基本的折线图。据我所知,默认情况下,Chartjs将在悬停时显示数据点,但由于某种原因,图表上显示的每个数据点都不理想,因为会有数千个数据点。chart examle
据我所知,Chartjs中折线图的默认行为是在悬停时显示数据。我试过禁用工具提示如下:

  1. options: {
  2. tooltips: {
  3. enabled: false
  4. }
  5. }

我也尝试直接从react-chartjs复制粘贴示例代码并插入我自己的数据,但我仍然得到所有数据点显示。我不知道该尝试什么,所以提前谢谢你。下面是我的组件:

  1. import {
  2. CategoryScale,
  3. LineElement,
  4. LinearScale,
  5. PointElement,
  6. TimeScale,
  7. Legend,
  8. Title,
  9. Chart,
  10. Tooltip
  11. } from 'chart.js';
  12. import './App.css';
  13. import { Line } from 'react-chartjs-2';
  14. import annotationPlugin from 'chartjs-plugin-annotation';
  15. import ChartDataLabels from 'chartjs-plugin-datalabels';
  16. import 'chartjs-adapter-date-fns';
  17. import { useEffect, useState } from 'react';
  18. Chart.register(
  19. CategoryScale,
  20. LinearScale,
  21. PointElement,
  22. LineElement,
  23. Title,
  24. annotationPlugin,
  25. ChartDataLabels,
  26. TimeScale,
  27. Legend,
  28. Tooltip
  29. );
  30. function App() {
  31. const [ temps, setTemps ] = useState([]);
  32. const [ times, setTimes ] = useState([]);
  33. useEffect(() => {
  34. async function fetchData () {
  35. const dates = [];
  36. const temps = [];
  37. const url = 'data/device1/input_device_1_a.json';
  38. const response = await fetch(url);
  39. const data = await response.json();
  40. for (let i = 0; i < data.length; i++) {
  41. dates.push(data[i].time);
  42. temps.push(data[i].tmp);
  43. }
  44. setTimes(dates);
  45. setTemps(temps);
  46. }
  47. fetchData();
  48. }, []);
  49. const chartData = {
  50. labels: times,
  51. datasets: [
  52. {
  53. label: 'Device 1',
  54. data: temps,
  55. borderColor: 'rgb(255, 99, 132)',
  56. backgroundColor: 'rgba(255, 99, 132, 0.5)',
  57. },
  58. ],
  59. }
  60. const chartOptions = {
  61. responsive: true,
  62. plugins: {
  63. legend: {
  64. position: 'top',
  65. },
  66. title: {
  67. display: true,
  68. text: 'Chart.js Line Chart',
  69. },
  70. },
  71. }
  72. return (
  73. <Line data={chartData} options={chartOptions} />
  74. );
  75. }
  76. export default App;
ffdz8vbo

ffdz8vbo1#

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

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

如果您不特别需要数据标签,最简单的方法是不全局注册它。您仍然可以将其作为插件传递给需要它的特定图表。
如果你只想对某些点或某些数据集使用数据标签,那么你必须检查数据标签文档-它有很多选项,包括(为了完全灵活)scriptable options,它可以通过JavaScript回调应用你想要的任何逻辑。

相关问题