需求：用jQuery实现分组堆叠柱状图对比近两年分类销售数据

以下是基于jQuery和Chart.js的分组堆叠柱状图实现方案，可直接用于对比近两年按分类统计的已售业务数量：

1. HTML结构 #

首先创建用于渲染图表的容器：

<div class="chart-container" style="position: relative; height: 400px; width: 800px;">
  <canvas id="salesChart"></canvas>
</div>

2. 引入依赖 #

在页面中引入jQuery和Chart.js（建议使用本地资源，避免外链依赖）：

<script src="jquery.min.js"></script>
<script src="chart.min.js"></script>

3. jQuery初始化图表 #

通过jQuery在DOM加载完成后配置并渲染图表：

$(document).ready(function() {
  // 模拟业务数据：分类、近两年不同业务类型的已售数量
  const categoryLabels = ["分类A", "分类B", "分类C", "分类D"];
  // 2023年各分类下不同业务的销量
  const sales2023 = {
    基础业务: [120, 190, 300, 240],
    增值业务: [80, 150, 220, 180]
  };
  // 2024年各分类下不同业务的销量
  const sales2024 = {
    基础业务: [150, 220, 350, 280],
    增值业务: [100, 180, 250, 210]
  };

  // 构建图表数据集
  const chartDatasets = [];
  // 添加2023年的堆叠系列
  Object.keys(sales2023).forEach((item, idx) => {
    chartDatasets.push({
      label: `2023 - ${item}`,
      data: sales2023[item],
      backgroundColor: `rgba(54, 162, 235, ${0.5 + idx * 0.2})`,
      stack: "year-2023"
    });
  });
  // 添加2024年的堆叠系列
  Object.keys(sales2024).forEach((item, idx) => {
    chartDatasets.push({
      label: `2024 - ${item}`,
      data: sales2024[item],
      backgroundColor: `rgba(255, 99, 132, ${0.5 + idx * 0.2})`,
      stack: "year-2024"
    });
  });

  // 初始化图表
  const chartCtx = $("#salesChart")[0].getContext("2d");
  new Chart(chartCtx, {
    type: "bar",
    data: {
      labels: categoryLabels,
      datasets: chartDatasets
    },
    options: {
      responsive: true,
      scales: {
        x: {
          stacked: false, // X轴不堆叠，实现年份分组
          title: {
            display: true,
            text: "业务分类"
          }
        },
        y: {
          stacked: true, // Y轴堆叠，同一年份的业务数量叠加
          title: {
            display: true,
            text: "已售业务数量"
          }
        }
      },
      plugins: {
        legend: {
          position: "top"
        },
        title: {
          display: true,
          text: "近两年按分类统计的已售业务数量对比"
        }
      }
    }
  });
});

核心实现说明 #

• 分组堆叠逻辑：通过给同一年份的数据集设置相同的stack值，实现同分类下不同年份的分组展示，同一年份内不同业务类型的数量堆叠
• 样式区分：使用不同色系区分年份，同一年份内的业务类型通过透明度差异区分
• 响应式配置：开启responsive让图表可适配不同容器尺寸

内容的提问来源于stack exchange，提问作者Meet Kadivar