哪款jQuery插件可创建具备特定样式的不等单元格堆叠柱状图？

嘿，我懂你要的这种自定义图表需求了——Google堆叠柱状图确实没法灵活适配这种单元格数量不一、还得简化图例的场景。我给你一个用HTML+CSS实现的方案，完全能满足你的所有要求，而且自由度超高：

这个方案完全贴合你的需求，不管是调整单元格数量、修改颜色还是简化图例，都能轻松搞定：

完整实现代码 #

<!DOCTYPE html>
<html>
<head>
    <style>
        .chart-container {
            display: flex;
            align-items: flex-end;
            gap: 20px;
            padding: 20px;
            border-bottom: 1px solid #333;
            margin-bottom: 20px;
        }
        .chart-column {
            display: flex;
            flex-direction: column;
            gap: 2px; /* 单元格间的小间隙，强化分隔感 */
        }
        .chart-cell {
            width: 60px;
            height: 40px;
            border: 1px solid #ccc;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            transition: background-color 0.3s;
        }
        /* 预定义颜色类，方便快速修改 */
        .yellow-bg {
            background-color: #f9e79f;
        }
        .blue-bg {
            background-color: #85c1e9;
        }
        .gray-bg {
            background-color: #d5d8dc;
        }
        /* 图例样式 */
        .legend-container {
            display: flex;
            gap: 30px;
            padding: 0 20px;
        }
        .legend-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .legend-color {
            width: 20px;
            height: 20px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <!-- 图表主体 -->
    <div class="chart-container">
        <!-- 第一列：5个单元格 -->
        <div class="chart-column">
            <div class="chart-cell yellow-bg">12</div>
            <div class="chart-cell blue-bg">8</div>
            <div class="chart-cell yellow-bg">15</div>
            <div class="chart-cell gray-bg">5</div>
            <div class="chart-cell blue-bg">10</div>
        </div>
        <!-- 第二列：3个单元格 -->
        <div class="chart-column">
            <div class="chart-cell blue-bg">7</div>
            <div class="chart-cell yellow-bg">14</div>
            <div class="chart-cell blue-bg">9</div>
        </div>
        <!-- 第三列：4个单元格 -->
        <div class="chart-column">
            <div class="chart-cell gray-bg">4</div>
            <div class="chart-cell yellow-bg">11</div>
            <div class="chart-cell yellow-bg">13</div>
            <div class="chart-cell blue-bg">6</div>
        </div>
    </div>

    <!-- 图例：只标注需要的颜色，不用对应所有单元格 -->
    <div class="legend-container">
        <div class="legend-item">
            <div class="legend-color yellow-bg"></div>
            <span>高优先级</span>
        </div>
        <div class="legend-item">
            <div class="legend-color blue-bg"></div>
            <span>中优先级</span>
        </div>
    </div>
</body>
</html>

需求适配说明 #

• 各列单元格数量不等：每个.chart-column里的.chart-cell可以随意增减，完全自定义每列的长度，想加多少加多少。
• 单元格带数字+列内边框：每个单元格都自带边框，内部用flex布局让数字居中显示，单元格之间的小间隙也让分隔更清晰。
• 可编辑任意单元格背景色：两种方式任选——要么给单元格加预定义的颜色类（比如yellow-bg），要么直接写行内样式style="background-color: #你的颜色"，想改哪个单元格就改哪个。
• 图例数量少于单元格数量：图例区域只放你需要标注的颜色类别，像示例里的灰色单元格没在图例里出现，完全不影响使用，灵活度拉满。

如果需要动态修改（比如用JS批量改颜色、更新数字），也能在这个基础上轻松扩展，比如用JavaScript遍历单元格元素来修改样式或内容就行。

内容的提问来源于stack exchange，提问作者Tran Audi