Question

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

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
                        });
                    }

当我有一个包含两个数据条目的数据集时，每个条形图都有自己的标签，但它们的颜色相同。

我需要它看起来像这样：screenshot

有什么建议吗？

Answer 1

我找到了解决方案：

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();

                    }

Answer 2

您可以通过在数据集中设置颜色数组而不是单一颜色来执行此操作。你可以找到它here in the documentation。

您的数据配置看起来与此类似：

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]
        }
    ]
}

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

2 个答案: