React中Chart.js折线图：如何隐藏数据值与坐标轴？

当然可以隐藏这些数据值，你当前的代码已经关闭了tooltip和坐标轴标签，但如果图表上直接显示了数据数值（比如65、59这类），大概率是因为你引入了chartjs-plugin-datalabels插件——这个插件会默认在数据点旁显示数值。

只需要在你的options配置里添加对该插件的禁用设置即可：

const options = {
  scales: {
    x: {
      grid: {
        display: false, // 移除x轴网格线
      },
      ticks: {
        display: false, // 隐藏x轴刻度标签
      },
    },
    y: {
      grid: {
        display: false,
      },
      ticks: {
        display: false, // 隐藏y轴刻度标签
      },
    },
  },
  plugins: {
    legend: {
      display: false,
    },
    tooltips: {
      enabled: false, // 隐藏 hover 时的数据提示框
    },
    datalabels: { // 添加这部分配置禁用数据标签
      display: false
    }
  },
};

如果你的项目里没装这个插件但还是显示了数值，那可能是其他自定义配置导致的，但这种情况极少。按上面的修改后，数据值就会被隐藏了。

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