图例与提示框

Chart.js 提供灵活的图例和提示框配置，方便你展示图表信息。图例可以控制显示与隐藏、调整位置和样式，提示框则支持丰富的内容格式和交互效果，帮助用户更好理解图表数据。

(function() {
  const ctx = document.getElementById('legendTooltipChart').getContext('2d');
  const legendTooltipChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['苹果', '香蕉', '橙子', '葡萄', '草莓'],
      datasets: [{
        label: '水果销量',
        data: [12, 19, 7, 15, 10],
        backgroundColor: [
          'rgba(255, 99, 132, 0.7)',
          'rgba(255, 206, 86, 0.7)',
          'rgba(54, 162, 235, 0.7)',
          'rgba(153, 102, 255, 0.7)',
          'rgba(75, 192, 192, 0.7)'
        ]
      }]
    },
    options: {
      responsive: true,
      plugins: {
        legend: {
          display: true,
          position: 'top',
          labels: {
            color: '#444',
            font: { size: 14 }
          },
          onClick: (e, legendItem, legend) => {
            const index = legendItem.datasetIndex;
            const ci = legend.chart;
            ci.toggleDataVisibility(index);
            ci.update();
          }
        },
        tooltip: {
          enabled: true,
          backgroundColor: 'rgba(0,0,0,0.8)',
          titleFont: { size: 16, weight: 'bold' },
          bodyFont: { size: 14 },
          callbacks: {
            label: function(context) {
              return `销量: ${context.parsed.y}`;
            }
          }
        }
      }
    }
  });
})();

loading