用 Chart.js
创建令人惊艳的图表

const myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['A', 'B', 'C', 'D', 'E'],
    datasets: [{
      label: '数据集 1',
      data: [12, 19, 3, 5, 2],
      // 线条颜色
      borderColor: '#36A2EB',
      // 填充颜色
      backgroundColor: 'rgba(54, 162, 235, 0.1)',
      // 线条宽度
      borderWidth: 2,
      // 点的样式
      pointBackgroundColor: '#36A2EB',
      pointRadius: 4,
      pointHoverRadius: 6,
      // 是否填充区域
      fill: true,
      // 线条张力
      tension: 0.4
    }]
  },
  options: {
    // 自定义配置
  }
});

options: {
  // 动画配置
  animation: {
    duration: 2000, // 动画持续时间（毫秒）
    easing: 'easeOutQuart' // 动画缓动函数
  },
  
  // 交互配置
  interaction: {
    mode: 'index', // 交互模式
    intersect: false // 是否只在鼠标与元素相交时触发
  },
  
  // 悬停配置
  plugins: {
    tooltip: {
      backgroundColor: 'rgba(17, 25, 40, 0.9)',
      titleColor: '#fff',
      bodyColor: '#ccc',
      borderColor: '#444',
      borderWidth: 1,
      padding: 12,
      displayColors: false,
      callbacks: {
        // 自定义提示文本
        label: function(context) {
          return `值: ${context.parsed.y} (${context.parsed.y * 100}%)`;
        }
      }
    }
  }
}

// 更新数据集数据
myChart.data.datasets[0].data = [25, 30, 45, 50, 70];
// 更新标签
myChart.data.labels = ['周一', '周二', '周三', '周四', '周五'];
// 触发更新
myChart.update();

// 或者使用更精细的更新
myChart.data.datasets.push({
  label: '新数据集',
  data: [10, 20, 30, 40, 50],
  borderColor: '#4BC0C0'
});
myChart.update('none'); // 无动画
// myChart.update('resize'); // 只更新尺寸
// myChart.update('reset'); // 重置动画

// 注册一个简单的插件
Chart.register({
  id: 'customPlugin',
  // 在绘制前执行
  beforeDraw: (chart) => {
    const {ctx, chartArea} = chart;
    if (!chartArea) return;
    
    // 在图表顶部添加文本
    ctx.save();
    ctx.font = 'bold 16px sans-serif';
    ctx.fillStyle = '#fff';
    ctx.textAlign = 'center';
    ctx.fillText('月度报告', chartArea.centerX, chartArea.top - 20);
    ctx.restore();
  }
});

// 使用第三方插件
// import ChartDataLabels from 'chartjs-plugin-datalabels';
// Chart.register(ChartDataLabels);