Charts chart.js-第二个条形图，带有另一个标签和不同的颜色

我正在使用chart.js制作两条条形图。我需要不同的颜色。但当我有两个数据集时，我想要不同的颜色，但条形图被分组在一个标签中，如下所示：和代码：

var barChartData = {
                        labels : ["Pronájem","Trvalá licence"],
                        datasets : [
                            {
                                fillColor : "rgba(0,59,98,0.5)",
                                strokeColor : "rgba(0,59,98,0.8)",
                                highlightFill: "rgba(0,59,98,0.75)",
                                highlightStroke: "rgba(0,59,98,1)",
                                data : [30000]
                            },
                            {
                                fillColor : "rgba(179,178,178,0.5)",
                                strokeColor : "rgba(179,178,178,0.8)",
                                highlightFill : "rgba(179,178,178,0.75)",
                                highlightStroke : "rgba(179,178,178,1)",
                                data : [80000]
                            }
                        ]

                    }
                    window.onload = function(){
                        var ctx = document.getElementById("canvas").getContext("2d");
                        window.myBar = new Chart(ctx).Bar(barChartData, {
                            responsive : false
                        });
                    }

当我有一个数据集和两个数据条目时，每个条都有自己的标签，但颜色相同

我需要它看起来像这样：

有什么建议吗

我找到了解决方案：

var barChartData = {
                        labels : ["PRONÁJEM","TRVALÁ LICENCE"],
                        datasets : [
                            {
                                fillColor : "rgba(0,59,98,1)",
                                strokeColor : "rgba(0,59,98,1)",
                                highlightFill: "rgba(0,59,98,0.75)",
                                highlightStroke: "rgba(0,59,98,0.75)",
                                data : [30000, 80000]
                            }
                        ]
                    }
                    window.onload = function(){
                        var ctx = document.getElementById("canvas").getContext("2d");
                        window.myBar = new Chart(ctx).Bar(barChartData, {
                            responsive : false,  scaleShowHorizontalLines: false, scaleShowVerticalLines: false, scaleLabel : "<%= Number(value) + ' Kč'%>"
                        });
                        myBar.datasets[0].bars[1].fillColor = "rgba(179,178,178,1)";
                        myBar.datasets[0].bars[1].strokeColor = "rgba(179,178,178,1)";
                        myBar.datasets[0].bars[1].highlightFill = "rgba(179,178,178,0.75)";
                        myBar.datasets[0].bars[1].highlightStroke = "rgba(179,178,178,0.75)";
                        myBar.update();

                    }

var barChartData={
标签：[“PRONÁJEM”、“TRVALÁlicense”]，
数据集：[
{
填充颜色：“rgba（0,59,98,1）”，
strokeColor:“rgba（0,59,98,1）”，
高光填充：“rgba（0,59,98,0.75）”，
强光笔划：“rgba（0,59,98,0.75）”，
数据：[30000，80000]
}
]
}
window.onload=函数（）{
var ctx=document.getElementById（“画布”）.getContext（“2d”）；
window.myBar=新图表（ctx）.Bar（barChartData{
响应：false，缩放水平线：false，缩放垂直线：false，缩放标签：“”
});
myBar.dataset[0].bar[1].fillColor=“rgba（179178,1）”；
myBar.dataset[0].bar[1].strokeColor=“rgba（179178,1）”；
myBar.dataset[0].bar[1].highlightFill=“rgba（179178,0.75）”；
myBar.dataset[0].bar[1].highlightStroke=“rgba（179178,0.75）”；
myBar.update（）；
}

您可以通过在数据集中设置颜色数组而不是单一颜色来实现这一点。你可以找到它

然后，您的数据配置将如下所示：

var barChartData = {
    labels : ["Pronájem", "Trvalá licence"],
    datasets : [
        {
            backgroundColor : ["rgba(0,59,98,0.5)", "rgba(179,178,178,0.5)"],
            borderColor : ["rgba(0,59,98,0.8)", "rgba(179,178,178,0.8)"],
            hoverBackgroundColor: ["rgba(0,59,98,0.75)", "rgba(179,178,178,0.75)"],
            hoverBorderColor: ["rgba(0,59,98,1)", "rgba(179,178,178,1)"],
            data : [30000, 80000]
        }
    ]
}