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

90

我在正在处理的项目中使用ChartJS，并且条形图中的每个条都需要使用不同的颜色。

这是条形图数据集的示例：

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

有什么方法可以对每个条进行不同的绘制吗？

javascript  chart.js 
— BoooYaKa
source
3
为了节省您的滚动时间，此答案提到您可以将fillColor数据集的设置为数组，并且chart.js将遍历数组，为绘制的每个条形选择下一个颜色。
— 哈特利·布罗迪

Answers:

69

从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。

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

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

— 感谢：D
source
66

解决方法：调用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();
}
— 杰瑞
source
1
由于myObjBar是在window.onload中定义的，因此该代码无法以其当前形式运行，但已在主脚本流中使用了它，因此在尝试更改颜色时不会定义myObjBar。但是，我将底部的颜色更改代码移到了与生成条形图相同的范围内，并且效果很好！我真的不想修改chart.js以使工作变得如此简单，因此我对这种方法感到非常满意。编辑：我已经对答案提交了修改，以应用我的修复程序，只需要等待其批准即可。
— 约书亚·沃尔什
不幸的是，这似乎在Firefox或IE 10或11中不起作用。这是一个JSFiddle：jsfiddle.net/3fefqLko/1。关于如何使其在所有浏览器中都能正常工作的想法？
— 山芬2015年
更正：它确实适用于所有浏览器。只是您可以fillColor = "#FFFFFF;"在Chrome中进行操作，但是最后的分号不应该存在，并且FF和IE不会接受。
— 山芬
5
更新：您需要分配“ ._saved.fillColor”和“ .fillColor”-鼠标悬停（突出显示）后，它将使用_saved值进行还原-例如，如果您不分配新的颜色，它将还原原始颜色它
4
更新：这不适用于最新版本（2.0 +），但适用于1.0.2
— Madan Bhandari
51

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

我已经将其添加到文件的末尾，并在下面的“ fillColor：”内部调用了此函数

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

它的工作原理是每个栏都有不同的颜色。

— BoooYaKa
source
1
您可以发布完整的解决方案（例如，使用数据和数据集变量等）吗？我正在寻找类似的方法，但似乎无法复制您的解决方案。谢谢
— caseklim 2014年
嘿@casey，这是完整的Chart.Bar.js文件（您需要替换的文件）。pasteve.com/G2Rf0BBn，Ive突出显示了引起差异的那一行。请注意，在按钮的底部有一个函数，可根据索引“ i”从数组返回不同的颜色。数据集保持不变（就像问题中的那个一样）。希望对您有所帮助。
— BoooYaKa 2014年
绝对有帮助，谢谢！我没有意识到您正在修改实际的Chart.js文件，而不是您自己的代码。
— caseklim 2014年
这是一个很好的解决方案，并非ChartJS独有。
— crooksey
24

如果您查看基于Chart.js构建的“ 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]
        }
    ]
};
— 穆罕默德·莫辛·穆纳
source
您的简单解决方案对我有用，谢谢，chartNew.js对我来说非常好
— Pratswinz 2015年
我们如何在chartnew js中更改ingraphdatashow颜色？
— 2015年
— Muhammad Mohsin Muneer
非常感谢！不知道fillColor接受数组。
— 弗朗西斯科·昆特罗
18

您可以调用此函数，该函数为每个条形生成随机颜色 

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]
            }
        ]
    };
— 苏达山
source
2
嘿@Sudharshan谢谢您的回答，这将为每个图表产生不同的颜色，但对于条形图内的每个单个条形都不会，这是我想要的结果。有什么主意吗
— BoooYaKa 2014年
1
感谢您的代码。我能够使用它来更改条形本身的颜色。backgroundColor选项允许这样做。
— spyke01
在2.8版中，您可以使用函数来设置backgroundColor backgroundColor: randomColorGenerator,，而不是函数的结果backgroundColor: randomColorGenerator(),。对于每个项目调用该函数，而不是对所有函数调用一次。
— negas
13

截至2019年8月，Chart.js现在内置了此功能。

成功的条形图，用不同的彩色条

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

取自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]
        }]
    },

我刚刚测试了这种方法，它可以工作。每个条都有不同的颜色。

— 乐高积木
source
12

在这里，我通过执行两个功能解决了这个问题。

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（）创建颜色数组

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

然后，通过 

datasets: [{
    data: arrData,
    backgroundColor: poolColors(arrData.length),
    borderColor: poolColors(arrData.length),
    borderWidth: 1
}]
— 阿卜杜勒·哈米德（Abdul Hameed）
source
10

产生随机的颜色；

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)
    }]
};
— 马丁·施耐德
source
4

这是一种使用色散生成一致的随机色的方法

const colorHash = new ColorHash()

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

在此处输入图片说明

— 特诺克斯
source
3

这是我的处理方式：我推送了一个“颜色”数组，其条目数与数据数相同。为此，在脚本末尾添加了一个函数“ 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;
}
— 让·弗朗索瓦·鲁里埃
source
2

如果您无法使用NewChart.js，则只需更改使用数组设置颜色的方式即可。在Chart.js中找到帮助程序迭代：

替换此行：

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

在你的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]
                }
              ]
— 阿曼多·雷娜（Armando Reyna）
source
我创建了条形图代码的自定义子类，并向初始化程序添加了类似的代码来执行此操作。
— 戴维·雷诺兹
1

试试这个 ：

  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);
            }
        });
    }
— 范妮·卡南
source
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();

}

— 达米安
source
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;
}

现在，您可以在数据的backgroundColor字段中使用此功能：

data: {
        labels: count[0],
        datasets: [{
            label: 'Registros en BDs',
            data: count[1],
            backgroundColor: getRandomColor(count[1].length)
        }]
}
— 爱德华多·路易斯·桑托斯
source
1
这个答案需要工作。这给我带来了麻烦。我不得不将其重写为function getRandomColor(n) { var letters = '0123456789ABCDEF'.split(''); var color = '#'; for (var i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)]; } return color; }。
— 塞德里克
0

我最近刚遇到这个问题，这是我的解决方案

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
  }]
};
— 陈飞宇
source
0

基于以下拉取请求的代码：

datapoint.color = 'hsl(' + (360 * index / data.length) + ', 100%, 50%)';
— Voho
source
非常有用的想法-不仅仅是选择随机的颜色。为了进一步改善这一点，当条形图数量很多时，您也可以调整饱和度值，这样就可以在色轮上盘旋而不是仅仅在色轮上盘旋。
— 马丁CR
0

如果知道所需的颜色，则可以在数组中指定颜色属性，如下所示：

    backgroundColor: [
    'rgba(75, 192, 192, 1)',
    ...
    ],
    borderColor: [
    'rgba(75, 192, 192, 1)',
    ...
    ],
— 弗罗斯特比
source
0

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

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

请注意，函数调用中没有括号。这使代码每次都可以调用函数，而不是创建数组。这还防止了代码对所有柱使用相同的颜色

— 卡皮尔
source
-8

您可以使用实时间隙图 轻松生成图表
从Bar菜单中选择Mulicolors


（来源：livegap.com）

**所使用的图表库是chartnew.js
带有chartnew.js代码的chart.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]
            }
        ]
    };
— 奥马尔·塞基（Omar Sedki）
source
3
评论“抛弃您的库并使用其他库”完全遗漏了问题的重点。
— jlh
chartnew.js是chart.js的修改版本。就在这个时候多颜色不chart.js之支持，但在chartnew.js availble的
— 奥马尔Sedki
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.