cloth-design/cloth-design/src/app/modules/cloth/mobile/page-trends/chart.js

// 获取Canvas元素
const ctx = document.getElementById('colorChart').getContext('2d');

// 准备数据 - 与Angular组件中的colorData结构相同
const colorData = {
  labels: ['海洋蓝', '活力红', '森林绿', '阳光黄', '梦幻紫', '珊瑚橙'],
  datasets: [{
    label: '使用次数',
    data: [1850, 1620, 1540, 1420, 1360, 1280],
    backgroundColor: [
      '#3498db',
      '#e74c3c',
      '#2ecc71',
      '#f1c40f',
      '#9b59b6',
      '#ff7f50'
    ],
    borderColor: [
      '#2980b9',
      '#c0392b',
      '#27ae60',
      '#f39c12',
      '#8e44ad',
      '#ff6347'
    ],
    borderWidth: 1,
    borderRadius: 10
  }]
};

// 创建图表
const colorChart = new Chart(ctx, {
  type: 'bar',
  data: colorData,
  options: {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      legend: {
        display: false
      },
      title: {
        display: true,
        text: '颜色使用频率统计',
        font: {
          size: 16
        }
      }
    },
    scales: {
      y: {
        beginAtZero: true,
        grid: {
          color: 'rgba(0, 0, 0, 0.05)'
        }
      },
      x: {
        grid: {
          display: false
        }
      }
    }
  }
});