Vue中ChartJS组件移除数据点旁数值的问题求助

你遇到的是ChartJS中**数据标签（Data Labels）**的显示问题——这些数值不会默认出现，大概率是因为你引入了chartjs-plugin-datalabels插件（ChartJS原生并不自带这个功能）。下面是两种快速移除它们的方法：

方法1：全局关闭所有数据标签 #

首先要注意，你当前配置里的plotOptions是错误的命名，ChartJS对应的配置项是options，不改的话你的配置可能不会生效。在options中添加plugins配置，就能全局禁用数据标签：

const chartConfig = {
  labels: Array.from(Array(512).keys()),
  datasets: [
    {
      label: "Spectrum",
      fill: false,
      borderColor: "rgba(8, 8, 8, 0.4)",
      backgroundColor: "rgba(8, 8, 8, 0.5)",
      pointBackgroundColor: "rgba(8, 8, 8, 1)",
      data: yval,
    },
  ],
  options: { // 修正为ChartJS的标准配置项名称
    responsive: true,
    maintainAspectRatio: false,
    bezierCurve: true,
    tooltips: { enabled: false },
    legend: { display: true },
    scales: {
      yAxes: [
        {
          display: true,
          type: "logarithmic",
        },
      ],
    },
    plugins: { // 添加数据标签控制配置
      datalabels: {
        display: false // 全局关闭所有数据点旁的数值
      }
    }
  }
};

方法2：仅针对当前数据集关闭数据标签 #

如果你只想隐藏这个"Spectrum"数据集的数值，而保留其他数据集的显示，可以直接在数据集配置里单独设置：

datasets: [
  {
    label: "Spectrum",
    fill: false,
    borderColor: "rgba(8, 8, 8, 0.4)",
    backgroundColor: "rgba(8, 8, 8, 0.5)",
    pointBackgroundColor: "rgba(8, 8, 8, 1)",
    data: yval,
    datalabels: { // 仅当前数据集关闭数值显示
      display: false
    }
  },
]

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