如何修改Chart.js中Tooltip（提示框）的背景颜色？

我用Chart.js开发极地区域图时，尝试修改Tooltip背景色但始终无效，试过YouTube教程里的方法以及自定义Tooltip函数都没用，作为JavaScript新手，不知道哪里出错了。

问题根源 #

你的代码存在两个核心问题：

• 错误创建了两个图表实例，实际生效的是polarAreaChart，但Tooltip配置被写到了另一个无对应DOM元素的myChart实例中，配置完全未生效。
• 未将Tooltip配置放到目标图表polarAreaChart的options参数内，不符合Chart.js v3+版本的配置规则。

修改后的完整代码 #

document.addEventListener('DOMContentLoaded', function() {
  Chart.defaults.backgroundColor = false;
  Chart.defaults.borderColor = '#36A2EB';
  Chart.defaults.color = '#ffffff';

  // 图表数据
  const chartData = {
    2010: [107, 90, 200],
    2011: [120, 100, 220],
    2012: [130, 110, 240],
    2013: [140, 120, 260],
    2014: [107, 130, 200],
    2015: [190, 150, 220],
    2016: [230, 190, 240],
    2017: [250, 220, 260],
    2018: [260, 240, 200],
    2019: [280, 290, 220],
    2020: [285, 340, 240],
    2021: [310, 420, 260],
  };

  const labels = ['Red', 'Orange', 'Yellow']
  const data = {
    datasets: [{
      label: 'Stromverbrauch in TWh',
      data: [107, 500, 200],
      backgroundColor: [
        'rgba(192, 151, 105, 0.9)',
        'rgba(162, 109, 47, 0.9)',
        'rgba(243, 198, 69, 0.9)',
        'rgba(255, 155, 0, 0.9)',
      ],
      borderColor: 'rgb(120,162,211)',
    }],
    labels: labels,
  };

  // 图表选项（添加Tooltip配置）
  const options = {
    animation: {
      animateRotate: true,
      animateScale: true,
    },
    legend: {
      position: 'top',
      labels: {
        fontColor: '#78a2d3',
      },
    },
    scales: {
      reverse: false,
      r: {
        ticks: {
          beginAtZero: true,
          z: 3,
          color: '#ffffff',
          backdropColor: 'transparent'
        }
      }
    },
    // 关键：在这里添加Tooltip插件配置
    plugins: {
      tooltip: {
        backgroundColor: 'green', // 直接设置背景色（最简单方式）
        // 若需更复杂自定义，可替换为以下函数：
        /*
        custom: function(tooltip) {
          if (!tooltip) return;
          tooltip.backgroundColor = 'green';
          // 可额外自定义边框、字体等样式
        }
        */
      }
    }
  };

  // 创建目标图表实例
  const ctx = document.getElementById('polarAreaChart').getContext('2d');
  const polarAreaChart = new Chart(ctx, {
    type: 'polarArea',
    data: data,
    options: options,
  });

  // 年份滑块事件
  const yearSlider = document.getElementById('yearRange');
  const yearLabel = document.getElementById('year-label');

  yearSlider.addEventListener('input', function() {
    const selectedYear = yearSlider.value;
    yearLabel.textContent = selectedYear;
    polarAreaChart.data.datasets[0].data = chartData[selectedYear];
    polarAreaChart.update();
  });

  yearLabel.textContent = yearSlider.value;
});

关键修改说明 #

1. 配置位置修正：将Tooltip配置移到polarAreaChart的options.plugins.tooltip下，这是Chart.js v3+版本的标准插件配置位置。
2. 删除无效代码：移除了无对应DOM元素的config和myChart实例代码，避免冗余错误。
3. 两种修改方式：
   • 直接设置backgroundColor属性，适合简单需求；
   • 使用custom函数，适合需要额外自定义样式的场景。

内容的提问来源于stack exchange，提问作者Kaja S.