柱状图 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 },
      },
    },
  });
})();

示例无法以 iframe 加载（请检查路径或将 demo 放到 public/）。