深入理解 Chart.js：正确配置工具提示背景色与图例

const options = {
  plugins: {
    tooltip: {
      backgroundColor: 'green' // 设置工具提示背景色
    }
  },
  // ... 其他图表选项
};

const options = {
  plugins: {
    legend: {
      position: 'top', // 图例位置
      labels: {
        color: '#78a2d3' // 图例标签颜色
      }
    },
    // ... 其他插件配置
  },
  // ... 其他图表选项
};

document.addEventListener('DOMContentLoaded', function() {
  // 设置 Chart.js 全局默认值
  Chart.defaults.backgroundColor = false;
  Chart.defaults.borderColor = '#36A2EB';
  Chart.defaults.color = '#000000'; // 确保默认文本颜色可见

  // 示例数据
  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,
  };

  // 图表选项配置
  const options = {
    plugins: {
      tooltip: {
        backgroundColor: 'green' // 正确配置工具提示背景色
      },
      legend: {
        position: 'top',
        labels: {
          color: '#78a2d3', // 正确配置图例标签颜色
        },
      },
    },
    layout: {
      padding: {
        top: 30,
      },
    },
    animation: {
      animateRotate: true,
      animateScale: true,
    },
    scales: {
      r: {
        ticks: {
          beginAtZero: true,
          z: 3,
          color: '#000000',
          backdropColor: 'transparent'
        }
      }
    }
  };

  // 获取 canvas 元素并创建图表
  const ctx = document.getElementById('polarAreaChart').getContext('2d');
  const polarAreaChart = new Chart(ctx, {
    type: 'polarArea',
    data: data,
    options: options, // 应用包含正确配置的 options 对象
  });

  // 模拟数据更新的滑块功能 (与主题不直接相关，但保留以保持上下文完整性)
  const yearSlider = document.getElementById('yearRange');
  const yearLabel = document.getElementById('year-label');

  if (yearSlider && yearLabel) { // 确保元素存在
    yearSlider.addEventListener('input', function() {
      const selectedYear = yearSlider.value;
      yearLabel.textContent = selectedYear;
      polarAreaChart.data.datasets[0].data = chartData[selectedYear];
      polarAreaChart.update();
    });
    yearLabel.textContent = yearSlider.value; // 初始化标签
  }
});