尺寸与响应式

在使用 Chart.js 创建图表时，合理设置尺寸和响应式选项非常重要。Chart.js 支持自动响应容器大小，也可以通过配置固定宽高来控制图表尺寸，帮助适配各种屏幕和布局需求。

(function() {
  const ctx = document.getElementById('responsiveChart').getContext('2d');
  const responsiveChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['红', '蓝', '黄', '绿', '紫', '橙'],
      datasets: [{
        label: '示例数据',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: [
          'rgba(255, 99, 132, 0.7)',
          'rgba(54, 162, 235, 0.7)',
          'rgba(255, 206, 86, 0.7)',
          'rgba(75, 192, 192, 0.7)',
          'rgba(153, 102, 255, 0.7)',
          'rgba(255, 159, 64, 0.7)'
        ]
      }]
    },
    options: {
      responsive: true, // 图表自动响应容器大小
      maintainAspectRatio: false, // 是否维持宽高比，false 时可自定义高度
      plugins: {
        legend: { display: true },
        tooltip: { enabled: true }
      }
    }
  });
})();

loading