Chart.js 具有多个条形图和一个标签的条形图

上面是一个示例图表。酒吧的彩色部分是开放的。酒吧的菱形部分已关闭。我只想要一张关闭的票的标签

var ctxMonthly = document.getElementById('monthlyTkts').getContext('2d');
            var chartMonthly = new Chart(ctxMonthly, {
                // The type of chart we want to create
                type: "bar",
                    // The data for our dataset
                data: {
                    labels: ["Week 1", "Week 2", "Week 3", "Week 4"],
                    datasets: [
                    {
//                      label: "Critical-Opened",
                        stack: "Critical",
                        backgroundColor: ["red", "red", "red", "red"],
                        borderColor: ["black", "black", "black", "black"],
                        data: 
                            <?php echo json_encode($monthlyOpenedData[0]); ?>
                    },
                    {
//                      label: "Critical-Closed",
                        stack: "Critical",
                        backgroundColor: ["purple", "purple", "purple", "purple"],
                        borderColor: ["black", "black", "black", "black"],
                        data: 
                            <?php echo json_encode($monthlyClosedData[0]); ?>
                    },
                    {
//                      label: "Urgent-Opened",
                        stack: "Urgent",
                        backgroundColor: ["orange", "orange", "orange", "orange"],
                        borderColor: ["black", "black", "black", "black"],
                        data: 
                            <?php echo json_encode($monthlyOpenedData[1]); ?>
                    },
                    {
//                      label: "Urgent-Closed",
                        stack: "Urgent",
                        backgroundColor: ["purple", "purple", "purple", "purple"],
                        borderColor: ["black", "black", "black", "black"],
                        data: 
                            <?php echo json_encode($monthlyClosedData[1]); ?>
                    },
                    {
//                      label: "Elevated-Opened",
                        stack: "Elevated",
                        backgroundColor: ["green", "green", "green", "green"],
                        borderColor: ["black", "black", "black", "black"],
                        data: 
                            <?php echo json_encode($monthlyOpenedData[2]); ?>
                    },
                    {
//                      label: "Elevated-Closed",
                        stack: "Elevated",
                        backgroundColor: ["purple", "purple", "purple", "purple"],
                        borderColor: ["black", "black", "black", "black"],
                        data: 
                            <?php echo json_encode($monthlyClosedData[2]); ?>
                    },
                    {
//                      label: "General-Opened",
                        stack: "General",
                        backgroundColor: ["blue", "blue", "blue", "blue"],
                        borderColor: ["black", "black", "black", "black"],
                        data: 
                            <?php echo json_encode($monthlyOpenedData[3]); ?>
                    },
                    {
//                      label: "General-Closed",
                        stack: "General",
                        backgroundColor: ["purple", "purple", "purple", "purple"],
                        borderColor: ["black", "black", "black", "black"],
                        data: 
                            <?php echo json_encode($monthlyClosedData[3]); ?>
                    }]
                },
                    // Configuration options go here
                options: {
                    responsive: true,
                    legendCallback: function(chartMonthly) {
                        var text = [];
                        text.push('<ul class="list-inline">');
                        var bgColorsMonthly = ["red", "orange", "green", "blue", "purple"];
                        var chartLabelsMonthly = ["Critical", "Urgent", "Elevated", "General", "Closed"];

                        for(var i = 0;i < 5; i++) {
                            text.push('<li class="list-inline-item btn text-white" style=" background: ' + bgColorsMonthly[i] + ' ">');
                            text.push(chartLabelsMonthly[i]);
                            text.push('</li>');
                        }

                        text.push('</ul>');
                        return text.join("");
                    },
                    scales: {
                        xAxes: [{
                            stacked: true,
                        }],
                        yAxes: [{
                            stacked: true,
                            ticks : {
                                min : 0
                            }
                        }]
                    },
                    legend: {
                        display: false,
                        labels: {
                            boxWidth: 15,
    //                      usePointStyle: true,
                        }
                    }
                }
            });
            document.getElementById('monthlyLabels').innerHTML = chartMonthly.generateLegend();

var ctxMonthly=document.getElementById（'monthlyTkts'）.getContext（'2d'）；
var chartMonthly=新图表（CTX每月{
//我们要创建的图表类型
输入：“酒吧”，
//我们的数据集的数据
数据：{
标签：[“第1周”、“第2周”、“第3周”、“第4周”]，
数据集：[
{
//标签：“关键打开”，
堆栈：“关键”，
背景颜色：[“红色”、“红色”、“红色”、“红色”]，
边框颜色：[“黑色”、“黑色”、“黑色”、“黑色”]，
数据：
},
{
//标签：“临界关闭”，
堆栈：“关键”，
背景颜色：[“紫色”、“紫色”、“紫色”、“紫色”]，
边框颜色：[“黑色”、“黑色”、“黑色”、“黑色”]，
数据：
},
{
//标签：“紧急打开”，
堆栈：“紧急”，
背景颜色：[“橙色”、“橙色”、“橙色”、“橙色”]，
边框颜色：[“黑色”、“黑色”、“黑色”、“黑色”]，
数据：
},
{
//标签：“紧急关闭”，
堆栈：“紧急”，
背景颜色：[“紫色”、“紫色”、“紫色”、“紫色”]，
边框颜色：[“黑色”、“黑色”、“黑色”、“黑色”]，
数据：
},
{
//标签：“高架开启”，
堆栈：“提升”，
背景颜色：[“绿色”、“绿色”、“绿色”、“绿色”]，
边框颜色：[“黑色”、“黑色”、“黑色”、“黑色”]，
数据：
},
{
//标签：“高架关闭”，
堆栈：“提升”，
背景颜色：[“紫色”、“紫色”、“紫色”、“紫色”]，
边框颜色：[“黑色”、“黑色”、“黑色”、“黑色”]，
数据：
},
{
//标签：“一般开放”，
堆栈：“一般”，
背景颜色：[“蓝色”、“蓝色”、“蓝色”、“蓝色”]，
边框颜色：[“黑色”、“黑色”、“黑色”、“黑色”]，
数据：
},
{
//标签：“一般关闭”，
堆栈：“一般”，
背景颜色：[“紫色”、“紫色”、“紫色”、“紫色”]，
边框颜色：[“黑色”、“黑色”、“黑色”、“黑色”]，
数据：
}]
},
//配置选项在这里
选项：{
回答：是的，
legendCallback:函数（chartMonthly）{
var text=[]；
text.push（“
”）；
var bgColorsMonthly=[“红色”、“橙色”、“绿色”、“蓝色”、“紫色”]；
var chartLabelsMonthly=[“严重”、“紧急”、“升高”、“一般”、“关闭”]；
对于（变量i=0；i<5；i++）{
text.push（'
”）；
text.push（图表标签每月[i]）；
text.push（“
”）；
}
text.push（“
”）；
返回text.join（“”）；
},
比例：{
xAxes：[{
对,，
}],
雅克斯：[{
对,，
滴答声：{
最低：0
}
}]
},
图例：{
显示：假，
标签：{
箱宽：15，
//usePointStyle:true，
}
}
}
});
document.getElementById（'monthlyLabels'）。innerHTML=chartmonly.generateGend（）；

---

好的，所以我发现我需要使用generateLegend来实现我想要的标签。是否有任何方法可以使图例的格式看起来像自动生成的图例，并且仍然达到我想要的效果？

请提供一些示例数据，并向我们展示您迄今为止为制作图表所做的工作。我猜数据是json格式的，您能否提供一些数组示例，也许是一个你希望图表看起来如何的图形例子？你是在问我们如何制作整个图表（坏），还是你目前所做的有什么特别的问题需要帮助（好）？在后一种情况下，请将您的代码编辑到您的问题中，如中所述。我编辑了文章并添加了一个示例输出图表。如果需要，我可以发布代码。@oldgeek69最好能看到代码片段或plunker或任何其他显示代码的东西，以便更好地看到