Different color for each bar in a bar chart; ChartJS

可以调用这个函数为每个条形图生成随机颜色

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

在查看 Chart.Bar.js 文件之后，我设法找到了解决方案。 我用这个函数生成了一个随机颜色:

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

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

现在看起来是这样:

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

它的工作，我得到不同的颜色为每个酒吧。

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

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

如果你看一下构建在 Chart.js 之上的库“ 图表新”，你可以通过像下面这样以数组的形式传递这些值:

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

如果您不能使用 NewChart.js，那么您只需改变使用数组设置颜色的方式。 查找 Chart.js 中的 helper 迭代:

替换这一行:

fillColor : dataset.fillColor,

这个:

fillColor : dataset.fillColor[index],

由此产生的代码:

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

在你的短裤里:

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

生成随机颜色;

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

并为每个记录调用它;

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

最后设置颜色;

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

从 v2开始，您可以通过 backgroundColor属性简单地指定一个值数组来对应每个条形图的颜色:

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

这对于 borderColor，hoverBackgroundColor，hoverBorderColor也是可能的。

根据 柱状图数据集属性的文件:

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

试试这个:

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

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

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

基于以下 撤回请求的代码:

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

在当前版本的 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();

}

here is how I dealed: 我推出了一个数组“颜色”，其中的条目数量与数据数量相同。为此，我在脚本的末尾添加了一个函数“ getRRandom Color”。 希望能帮上忙。

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

Here, I solved this issue by making two functions.

1. DynamicColors ()生成随机颜色

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

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

Then, just pass it

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

另一个答案是，如果你想得到一个列表，每个条的颜色都是随机的，这里有一个快速修复方法:

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

现在你可以使用这个函数在 backoundColor 字段中的 data:

data: {
labels: count[0],
datasets: [{
label: 'Registros en BDs',
data: count[1],
backgroundColor: getRandomColor(count[1].length)
}]
}

If you know which colors you want, you can specify color properties in an array, like so:

    backgroundColor: [
'rgba(75, 192, 192, 1)',
...
],
borderColor: [
'rgba(75, 192, 192, 1)',
...
],

截至2019年8月，Chart.js 现在已经内置了这个功能。

您只需要为 backoundColor 提供一个数组。

取自 https://www.chartjs.org/docs/latest/getting-started/的例子

以前:

  data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'My First dataset',
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: [0, 10, 5, 2, 20, 30, 45]
}]
},

之后:

  data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'My First dataset',
backgroundColor: ['rgb(255, 99, 132)','rgb(0, 255, 0)','rgb(255, 99, 132)','rgb(128, 255, 0)','rgb(0, 255, 255)','rgb(255, 255, 0)','rgb(255, 255, 128)'],
borderColor: 'rgb(255, 99, 132)',
data: [0, 10, 5, 2, 20, 30, 45]
}]
},

我刚刚测试了这个方法，它的工作原理。每个酒吧有不同的颜色。

下面是一种使用 彩色大杂烩生成 始终如一随机颜色的方法

const colorHash = new ColorHash()


const datasets = [{
label: 'Balance',
data: _.values(balances),
backgroundColor: _.keys(balances).map(name => colorHash.hex(name))
}]

我所做的就是创建一个随机颜色生成器，就像这里很多人建议的那样

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

然后编码了这个

var chartContext = document.getElementById('line-chart');
let lineChart = new Chart(chartContext, {
type: 'bar',
data : {
labels: <?php echo json_encode($names); ?>,
datasets: [{
data : <?php echo json_encode($salaries); ?>,
borderWidth: 1,
backgroundColor: dynamicColors,
}]
}
,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
responsive: true,
maintainAspectRatio: false,
}
});

注意，函数调用中没有括号 This enables the code to call the function every time, instead of making an array This also prevents the code from using the same color for all the bars

Pass a color parameter in dataPoints like below for each bar:

{y: your value, label: your value, color: your color code}

function getRandomColor() {


const colors = [];
var obj = @json($year);
const length = Object.keys(obj).length;
for(let j=0; j<length; j++ )
{
const letters = '0123456789ABCDEF'.split('');
let color = '#';
for (let i = 0; i < 6; i++ ) {
color += letters[Math.floor(Math.random() * 16)];
}
colors.push(color);
}
return colors;
}

对不同颜色使用这个函数

Following this answer: https://stackoverflow.com/a/48067347/931409, this is what I came up with to generate consistent colors, that don't change with each refresh:

const generateColorHue = (colorI: number, totalColors: number) => {
const step = 360 / totalColors;
const hue = Math.round(colorI * step);


return hue;
};


// ...
datasets: this.platforms.map((platform, i) => {
const hue = generateColorHue(i, this.platforms.length);
return {
label: platform,
borderColor: "hsl(" + hue + ", 50%, 40%)",
backgroundColor: "hsla(" + hue + ", 50%, 90%, .2)",
};
}),