柱状图 Bar

柱状图是用来展示不同类别数据比较的常见图表类型。使用 Chart.js 可以方便地绘制多样化的柱状图，实现清晰的数据对比效果。

基础柱状图示例

下面示例展示了如何创建一个响应式的柱状图，包含多彩柱子和图例。

(function() {
  const ctx = document.getElementById('barChart').getContext('2d');
  const barChart = 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,
      plugins: {
        legend: { display: true },
        tooltip: { enabled: true }
      }
    }
  });
})();

loading