哪个jquery插件可以创建堆叠柱形图？

我想创建如下图表：

列的单元格数不相等

在单元格中显示数字，并且在列的单元格之间有边框

可以编辑列的任何单元格的背景色

每列有许多单元格，但彩色批注的数量（图表右侧）可能少于单元格的数量。例如，单元格数为5，但只有两种颜色是黄色和蓝色

---

我尝试使用谷歌堆叠柱形图，但没有这样做，因为每列中的单元格数量非常大，但每列只有2-3种颜色，我非常想只注意2-3种颜色。

请参阅下面的FIDLE。您可以将Highchart插件用于堆栈图

Highcharts.chart（'容器'{
图表：{
类型：“列”
},
标题：{
文本：“堆叠柱形图”
},
xAxis：{
类别：[‘苹果’、‘橘子’、‘梨’、‘葡萄’、‘香蕉’]
},
亚克斯：{
分:0,，
标题：{
正文：“水果总消费量”
},
堆叠标签：{
启用：对，
风格：{
fontWeight:'粗体'，
颜色：（Highcharts.theme&&Highcharts.theme.textColor）| |“灰色”
}
}
},
图例：{
对齐：“右”，
x:-30，
垂直排列：“顶部”，
y:25，
浮动：是的，
背景颜色：（Highcharts.theme&&Highcharts.theme.background2）| |“白色”，
边框颜色：“#CCC”，
边框宽度：1，
影子：错
},
工具提示：{
headerFormat:“{point.x}
”，
pointFormat:“{series.name}:{point.y}
总计：{point.stackTotal}”
},
打印选项：{
专栏：{
堆叠：“正常”，
数据标签：{
启用：对，
颜色：（Highcharts.theme&&Highcharts.theme.dataLabelsColor）| |“白色”
}
}
},
系列：[{
姓名：'约翰'，
数据：[5,3,4,7,2]
}, {
姓名：'简'，
数据：[2,2,3,2,1]
}, {
名字：'乔'，
数据：[3,4,4,2,5]
}]
});

简单的谷歌搜索“javascript堆叠[条形]图”会返回很多很多结果。我已经搜索了资源请求，但结果不符合我提出的上述条件。我希望同一列中的单元格具有相同的颜色，如果一列有5个单元格，我只希望注意代表2种颜色的2个单元格。然后选择将是折衷或创建您自己的。发现很难相信在周围的各种图书馆中（有很多图书馆）有些东西没有你想要的。大多数是高度可定制的，我希望同一列中的单元格具有相同的颜色，如果一列有5个单元格，我只想说明代表2种颜色的2个单元格

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>


Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Stacked column chart'
    },
    xAxis: {
        categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Total fruit consumption'
        },
        stackLabels: {
            enabled: true,
            style: {
                fontWeight: 'bold',
                color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
            }
        }
    },
    legend: {
        align: 'right',
        x: -30,
        verticalAlign: 'top',
        y: 25,
        floating: true,
        backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
        borderColor: '#CCC',
        borderWidth: 1,
        shadow: false
    },
    tooltip: {
        headerFormat: '<b>{point.x}</b><br/>',
        pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
    },
    plotOptions: {
        column: {
            stacking: 'normal',
            dataLabels: {
                enabled: true,
                color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
            }
        }
    },
    series: [{
        name: 'John',
        data: [5, 3, 4, 7, 2]
    }, {
        name: 'Jane',
        data: [2, 2, 3, 2, 1]
    }, {
        name: 'Joe',
        data: [3, 4, 4, 2, 5]
    }]
});