Chart.js折线图数据过多，如何仅显示每第10个数据值？

你的思路完全可行，通过chartjs-plugin-datalabels插件的formatter函数控制标签显示逻辑，就能实现需求。这里给你几个优化点和注意事项：

1. 优化代码适配多数据集场景
   原代码固定取datasets[0]，如果图表包含多个数据集，改用context.datasetIndex能让逻辑更通用：

   plugins: {
     datalabels: {
       align: 'top',
       color: '#000000',
       font: {
         weight: 'bold',
         size: 16 // 数字类型无需加引号，更符合JS语法规范
       },
       formatter: (value, context) => {
         const dataLength = context.chart.data.datasets[context.datasetIndex].data.length;
         // 数据量不足100时显示全部标签，否则仅显示索引为10的倍数的标签
         return dataLength < 100 || context.dataIndex % 10 === 0 ? value : '';
       }
     }
   }
   

2. 调整标签显示的起始位置
   由于dataIndex从0开始计数，当前逻辑会显示第1、11、21...个数据（对应索引0、10、20...）。如果想从第10个数据开始显示，把判断条件改成(context.dataIndex + 1) % 10 === 0即可。

3. 确认第三方插件正确引入
   chartjs-plugin-datalabels是Chart.js的第三方插件，需确保已正确安装并注册：

   • 原生环境：通过CDN引入后，执行Chart.register(ChartDataLabels)完成全局注册
   • 模块化项目：安装依赖后，导入插件并注册：import ChartDataLabels from 'chartjs-plugin-datalabels'; Chart.register(ChartDataLabels)

内容的提问来源于stack exchange，提问作者Mariusz Adamczewski