条形图中每个条形的不同颜色;ChartJS

I'm using ChartJS in a project I'm working on and I need a different color for each bar in a Bar Chart.

我正在一个项目中使用ChartJS，我需要一个条形图中每个条形的不同颜色。

Here's an example of the bar chart data set:

下面是条形图数据集的一个示例:

var barChartData = {
  labels: ["001", "002", "003", "004", "005", "006", "007"],
  datasets: [{
    label: "My First dataset",
    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: [20, 59, 80, 81, 56, 55, 40]
  }]
};

Is there any way to paint each bar differently?

有什么方法可以把每一个酒吧都涂成不同的颜色吗?

14 个解决方案

#1

Solution: call the update method to set new values ​​:

解决方案:调用更新方法设置新值:

var barChartData = {
    labels: ["January", "February", "March"],
    datasets: [
        {
            label: "My First dataset",
            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: [20, 59, 80]
        }
    ]
};

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

    //nuevos colores
    myObjBar.datasets[0].bars[0].fillColor = "green"; //bar 1
    myObjBar.datasets[0].bars[1].fillColor = "orange"; //bar 2
    myObjBar.datasets[0].bars[2].fillColor = "red"; //bar 3
    myObjBar.update();
}

#2

After looking into the Chart.Bar.js file I've managed to find the solution. I've used this function to generate a random color:

查完图表后。我已经找到了解决方案。我用这个函数生成一个随机颜色:

function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

I've added it to the end of the file and i called this function right inside the "fillColor:" under

我将它添加到文件的末尾，并在下面的“fillColor:”中调用这个函数

helpers.each(dataset.data,function(dataPoint,index){
                    //Add a new point for each piece of data, passing any required data to draw.

so now it looks like this:

现在看起来是这样的:

helpers.each(dataset.data,function(dataPoint,index){
                    //Add a new point for each piece of data, passing any required data to draw.

                    datasetObject.bars.push(new this.BarClass({
                        value : dataPoint,
                        label : data.labels[index],
                        datasetLabel: dataset.label,
                        strokeColor : dataset.strokeColor,
                        fillColor : getRandomColor(),
                        highlightFill : dataset.highlightFill || dataset.fillColor,
                        highlightStroke : dataset.highlightStroke || dataset.strokeColor
                    }));
                },this);

and it works I get different color for each bar.

它的作用是，我得到不同的颜色。

#3

If you take a look at the library "ChartNew" which builds upon Chart.js you can do this by passing the values in as an array like so:

如果你看一下建立在图表上的“ChartNew”库。您可以通过将这些值作为数组传递，这样做:

var data = {
    labels: ["Batman", "Iron Man", "Captain America", "Robin"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: ["rgba(220,220,220,0.5)", "navy", "red", "orange"],
            strokeColor: "rgba(220,220,220,0.8)",
            highlightFill: "rgba(220,220,220,0.75)",
            highlightStroke: "rgba(220,220,220,1)",
            data: [2000, 1500, 1750, 50]
        }
    ]
};

#4

As of v2, you can simply specify an array of values to correspond to a color for each bar via the backgroundColor property:

从v2开始，只需通过backgroundColor属性指定一个值数组，以对应于每个bar的颜色:

datasets: [{
  label: "My First dataset",
  data: [20, 59, 80, 81, 56, 55, 40],
  backgroundColor: ["red", "blue", "green", "blue", "red", "blue"], 
}],

---

This is also possible for the borderColor, hoverBackgroundColor, hoverBorderColor.

这也可以为边界颜色，气垫底色，气垫底色。

From the documentation on the Bar Chart Dataset Properties:

从条形图数据集属性的文档中:

Some properties can be specified as an array. If these are set to an array value, the first value applies to the first bar, the second value to the second bar, and so on.

一些属性可以指定为数组。如果将这些值设置为数组值，则第一个值应用于第一个bar，第二个值应用于第二个bar，依此类推。

#5

You can call this function which generates random colors for each bars

你可以调用这个函数，它为每条线产生随机的颜色

var randomColorGenerator = function () { 
    return '#' + (Math.random().toString(16) + '0000000').slice(2, 8); 
};

var barChartData = {
        labels: ["001", "002", "003", "004", "005", "006", "007"],
        datasets: [
            {
                label: "My First dataset",
                fillColor: randomColorGenerator(), 
                strokeColor: randomColorGenerator(), 
                highlightFill: randomColorGenerator(),
                highlightStroke: randomColorGenerator(),
                data: [20, 59, 80, 81, 56, 55, 40]
            }
        ]
    };

#6

Generate random colors;

生成随机颜色;

function getRandomColor() {
        var letters = '0123456789ABCDEF'.split('');
        var color = '#';
        for (var i = 0; i < 6; i++) {
            color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
    }

and call it for each record;

对每条记录调用它;

function getRandomColorEachEmployee(count) {
        var data =[];
        for (var i = 0; i < count; i++) {
            data.push(getRandomColor());
        }
        return data;
    }

finally set colors;

最后设置颜色;

var data = {
            labels: jsonData.employees,// your labels
            datasets: [
                {
                    data: jsonData.approvedRatios,// your data
                    backgroundColor: getRandomColorEachEmployee(jsonData.employees.length)
                }
            ]
        };

#7

If you're not able to use NewChart.js you just need to change the way to set the color using array instead. Find the helper iteration inside Chart.js:

如果你不能使用NewChart。你只需要改变使用数组设置颜色的方式。在图表中找到帮助迭代:

Replace this line:

取代这一行:

fillColor : dataset.fillColor,

For this one:

这一个:

fillColor : dataset.fillColor[index],

The resulting code:

生成的代码:

//Iterate through each of the datasets, and build this into a property of the chart
  helpers.each(data.datasets,function(dataset,datasetIndex){

    var datasetObject = {
      label : dataset.label || null,
      fillColor : dataset.fillColor,
      strokeColor : dataset.strokeColor,
      bars : []
    };

    this.datasets.push(datasetObject);

    helpers.each(dataset.data,function(dataPoint,index){
      //Add a new point for each piece of data, passing any required data to draw.
      datasetObject.bars.push(new this.BarClass({
        value : dataPoint,
        label : data.labels[index],
        datasetLabel: dataset.label,
        strokeColor : dataset.strokeColor,
        //Replace this -> fillColor : dataset.fillColor,
        // Whith the following:
        fillColor : dataset.fillColor[index],
        highlightFill : dataset.highlightFill || dataset.fillColor,
        highlightStroke : dataset.highlightStroke || dataset.strokeColor
      }));
    },this);

  },this);

And in your js:

和你的js:

datasets: [
                {
                  label: "My First dataset",
                  fillColor: ["rgba(205,64,64,0.5)", "rgba(220,220,220,0.5)", "rgba(24,178,235,0.5)", "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: [2000, 1500, 1750, 50]
                }
              ]

#8

try this :

试试这个:

  function getChartJs() {
        **var dynamicColors = function () {
            var r = Math.floor(Math.random() * 255);
            var g = Math.floor(Math.random() * 255);
            var b = Math.floor(Math.random() * 255);
            return "rgb(" + r + "," + g + "," + b + ")";
        }**

        $.ajax({
            type: "POST",
            url: "ADMIN_DEFAULT.aspx/GetChartByJenisKerusakan",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (r) {
                var labels = r.d[0];
                var series1 = r.d[1];
                var data = {
                    labels: r.d[0],
                    datasets: [
                        {
                            label: "My First dataset",
                            data: series1,
                            strokeColor: "#77a8a8",
                            pointColor: "#eca1a6"
                        }
                    ]
                };

                var ctx = $("#bar_chart").get(0).getContext('2d');
                ctx.canvas.height = 300;
                ctx.canvas.width = 500;
                var lineChart = new Chart(ctx).Bar(data, {
                    bezierCurve: false,
                    title:
                      {
                          display: true,
                          text: "ProductWise Sales Count"
                      },
                    responsive: true,
                    maintainAspectRatio: true
                });

                $.each(r.d, function (key, value) {
                    **lineChart.datasets[0].bars[key].fillColor = dynamicColors();
                    lineChart.datasets[0].bars[key].fillColor = dynamicColors();**
                    lineChart.update();
                });
            },
            failure: function (r) {
                alert(r.d);
            },
            error: function (r) {
                alert(r.d);
            }
        });
    }

#9

I have just got this issue recently, and here is my solution

我最近刚遇到这个问题，这就是我的解决办法

var labels = ["001", "002", "003", "004", "005", "006", "007"];
var data = [20, 59, 80, 81, 56, 55, 40];
for (var i = 0, len = labels.length; i < len; i++) {
   background_colors.push(getRandomColor());// I use @Benjamin method here
}

var barChartData = {
  labels: labels,
  datasets: [{
    label: "My First dataset",
    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)",
    backgroundColor: background_colors,
    data: data
  }]
};

#10

This works for me in the current version 2.7.1:

这在当前版本2.7.1中对我适用:

function colorizePercentageChart(myObjBar) {

var bars = myObjBar.data.datasets[0].data;
console.log(myObjBar.data.datasets[0]);
for (i = 0; i < bars.length; i++) {

    var color = "green";

    if(parseFloat(bars[i])  < 95){
        color = "yellow";
    }
    if(parseFloat(bars[i])  < 50){
         color = "red";
    }

    console.log(color);
    myObjBar.data.datasets[0].backgroundColor[i] = color;

}
myObjBar.update(); 

}

}

#11

here is how I dealed: I pushed an array "colors", with same number of entries than number of datas. For this I added a function "getRandomColor" at the end of the script. Hope it helps...

下面是我的方法:我推了一个数组“颜色”，它的条目数与数据的数量相同。为此，我在脚本末尾添加了一个函数“getRandomColor”。希望它能帮助……

for(var i in arr) {
        customers.push(arr[i].customer);
        nb_cases.push(arr[i].nb_cases);
        colors.push(getRandomColor());
        }

     window.onload = function() {
    var config = {
    type: 'pie',
    data: {
        labels: customers,
        datasets: [{
            label: "Nomber of cases by customers",
            data: nb_cases,
            fill: true,
            backgroundColor: colors 
            }]
    },
    options: {
        responsive: true,
        title:{
        display:true,
        text:"Cases by customers"
        },
    }
    };



var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx, config);
};


function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

#12

Here, I solved this issue by making two functions. 1. dynamicColors() to generate random color

在这里，我通过做两个函数来解决这个问题。1。动态颜色()生成随机颜色

function dynamicColors() {
var r = Math.floor(Math.random() * 255);
var g = Math.floor(Math.random() * 255);
var b = Math.floor(Math.random() * 255);
return "rgba(" + r + "," + g + "," + b + ", 0.5)";}

2. poolColors() to create array of colors

   poolColors()用于创建颜色数组

   function poolColors(a) { var pool = []; for(i=0;i<a;i++){ pool.push(dynamicColors());} return pool; }

   函数poolColors(a) {var pool = [];(i = 0;我<;我+ +){ pool.push(dynamicColors());}返回池;}

Then, just pass it

然后,通过它

datasets: [{ data: arrData, backgroundColor: poolColors(arrData.length), borderColor: poolColors(arrData.length), borderWidth: 1 }]

数据集:[{data: arrData, backgroundColor: poolColors(arrData.length)， borderColor: poolColors(arrData.length)， borderWidth: 1}]

#13

Code based on the following pull request:

代码基于以下拉取请求:

datapoint.color = 'hsl(' + (360 * index / data.length) + ', 100%, 50%)';

#14

You can generate easily with livegap charts
Select Mulicolors from Bar menu

您可以很容易地生成与livegap图表选择Mulicolors从酒吧菜单

http://charts.livegap.com/Gallery/images/Chart-14.png
** chart library used is chartnew.js modified version of chart.js library
with chartnew.js code will be something like this

使用的是chartnew。修改版的图表。与chartnew js库。js代码是这样的

var barChartData = {
        labels: ["001", "002", "003", "004", "005", "006", "007"],
        datasets: [
            {
                label: "My First dataset",
                fillColor: ["rgba(0,10,220,0.5)","rgba(220,0,10,0.5)","rgba(220,0,0,0.5)","rgba(120,250,120,0.5)" ],
                strokeColor: "rgba(220,220,220,0.8)", 
                highlightFill: "rgba(220,220,220,0.75)",
                highlightStroke: "rgba(220,220,220,1)",
                data: [20, 59, 80, 81, 56, 55, 40]
            }
        ]
    };