Chart.js工具提示背景色修改及底部横轴移除问题求助

我来帮你搞定这两个问题：

1. 修改整个工具提示的背景色 #

你当前用的labelColor回调是用来修改工具提示里**标签（每个数据项的颜色标记）**的背景色，而不是整个工具提示的黑色背景。要修改整个tooltip的背景，直接在tooltips配置里添加backgroundColor属性即可：

tooltips: {
  yAlign: 'bottom',
  backgroundColor: 'rgb(255, 0, 0)', // 这行设置整个tooltip的背景色
  callbacks: {
    // 如果仍需要修改标签的颜色标记，可以保留这个回调
    labelColor: function(tooltipItem, chart) {
      return { backgroundColor: 'rgb(255, 0, 0)' }
    }
  }
}

这样设置后，鼠标悬停时的整个工具提示背景就会变成你想要的红色了。

2. 移除底部水平坐标轴（X轴） #

根据Chart.js的版本不同，配置方式略有区别：

如果你使用的是Chart.js v2.x： #

在scales配置下找到xAxes数组，给对应的轴设置display: false：

options: {
  scales: {
    xAxes: [{
      display: false // 隐藏底部X轴
    }],
    // 其他坐标轴配置（比如yAxes）...
  }
}

如果你使用的是Chart.js v3.x及以上版本： #

v3+版本把坐标轴配置简化了，直接在scales下的x对象里设置display: false：

options: {
  scales: {
    x: {
      display: false // 隐藏底部X轴
    }
  }
}

这样就能彻底隐藏底部的水平坐标轴了。

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