如何使用chartjs设置条形图中每个条形图的颜色

How to use set the color for each bar in a bar chart using chartjs?

本文关键字：条形图 颜色 chartjs 设置 何使用      更新时间：2023-09-26

我希望这个图中的条形图有我自己选择的不同颜色。我不想对条形图（或一组条形图）使用随机颜色。

var ctx = $("#myBarChart").get(0).getContext("2d");
var data = {
labels: ["a","b","c","d","e","f","g"],
datasets: [
    {
        label: "My First dataset",
        /*fillColor: "rgba(84,255,159,1)",
        highlightFill: "rgba(84,255,159,0.75)",*/
        data: [5,3, 4, 2, 1, 3, 1]
    },
]};
var myBarChart = new Chart(ctx).Bar(data);
var width = $('canvas').parent().width();
$('canvas').attr("width",width);
new Chart(ctx).Bar(data);

您可以使用索引器（如数组）访问数据集及其单个条：

myBarChart.datasets[0].bars[0].fillColor = "#2ECC71";
myBarChart.datasets[0].bars[0].highlightFill = "#58D68D";
myBarChart.datasets[0].bars[1].fillColor = "#3498DB";
myBarChart.datasets[0].bars[1].highlightFill = "#5DADE2";

尝试这个

var myBarChart = new Chart(ctx).Bar(dataset, options);  
 var dataset = {
    labels: ["a", "b", "c", "d", "e", "f", "g"], // Optional Labels
    datasets: [  // array of data
        {
            label: "Bar - Set 1",
            fillColor: "rgba(220,220,220,0.5)",
            strokeColor: "rgba(220,220,220,0.8)",
            highlightFill: "rgba(220,220,220,0.75)",
            highlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 80, 81, 56, 55, 40]
        },
        {
            label: "Bar - Set 2",
            fillColor: "rgba(151,187,205,0.5)",
            strokeColor: "rgba(151,187,205,0.8)",
            highlightFill: "rgba(151,187,205,0.75)",
            highlightStroke: "rgba(151,187,205,1)",
            data: [28, 48, 40, 19, 86, 27, 90]
        }
    ]
 //ect..
};

在ChartJS 2.4.0中，您可以为数据集中的每个元素分配不同的颜色[idx].data数组

即

....
data: [65, 59, 80, 81, 56, 55, 40],
backgroundColor: ["#5e4fa2", "#745998", "#8a638d", "#a06d83", "#b57678", "#cb806e", "#e18a63"]

参考链接：http://www.chartjs.org/docs/latest/charts/bar.html

相关文章：