Chart.js 工具提示背景颜色及其他插件配置指南

const options = {
  plugins: { // 插件配置入口
    tooltip: { // 工具提示插件配置
      backgroundColor: 'green', // 设置工具提示背景颜色为绿色
      // 其他工具提示相关配置，例如：
      // titleColor: '#fff',
      // bodyColor: '#fff',
      // borderColor: 'rgba(0,0,0,0.5)',
      // borderWidth: 1,
      // displayColors: false, // 是否显示颜色框
    },
    // 其他插件配置，例如 legend
    legend: {
      position: 'top',
      labels: {
        color: '#78a2d3', // 设置图例标签颜色
      },
    },
  },
  // 其他图表选项，例如动画、刻度等
  animation: {
    animateRotate: true,
    animateScale: true,
  },
  scales: {
    r: {
      ticks: {
        beginAtZero: true,
        color: '#000000',
        backdropColor: 'transparent'
      }
    }
  }
};

// 创建图表实例
const ctx = document.getElementById('polarAreaChart').getContext('2d');
const polarAreaChart = new Chart(ctx, {
  type: 'polarArea', // 图表类型
  data: data, // 图表数据
  options: options, // 图表选项
});

legend: {
  position: 'top',
  labels: {
    fontColor: '#78a2d3', // 旧版本或错误属性
  },
},

plugins: {
  legend: {
    position: 'top',
    labels: {
      color: '#78a2d3', // Chart.js v3+ 使用 'color'
    },
  },
  // ... 其他插件配置
},

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', // 设置工具提示背景颜色
        titleColor: '#fff', // 工具提示标题颜色
        bodyColor: '#fff', // 工具提示内容颜色
      },
      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,
  });

  // 年份选择器逻辑 (与 Chart.js 配置无关，但保留以展示完整功能)
  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; // 初始化标签
  }
});