如何在angular-chart.js中为每个条设置不同的颜色？ [英] How can I set different colours for each bar in angular-chart.js?

问题描述

我看过

解决方案

Plunker演示

最简单的做法是修改chart.js源文件以接受fillColor的颜色数组，而不是单个颜色字符串。

如果你能得到一个其他建议的解决方案工作，我认为最终必须以一个非角度的方式完成。

有些人可能不喜欢调整源代码，但是它是如何简单和容易做它，它实现了所需的结果，它是没有任何更少的'角度'在它的解决方案...让我们称之为图表的改进。注意，我只修改了bar图表来接受一个颜色数组，因为看起来chart.js在每个图表类型中分别引用了fillColor。因此，您应该能够对任何图表类型进行此修改。

您需要修改的地方：

  helpers.each（dataset.data，function（dataPoint，index）{
 //为每个数据添加一个新点， draw。
 datasetObject.bars.push（new this.BarClass（{
 value：dataPoint，
 label：data.labels [index]，
 datasetLabel：dataset.label，
 strokeColor：dataset.strokeColor，
 fillColor：dataset.fillColor [index]，//<  -  added [index] here 
 highlightFill：dataset.highlightFill || dataset.fillColor，
 highlightStroke：dataset.highlightStroke || dataset.strokeColor 
}））; 
}，this）; 
  

这个代码块可以在条形图的Chart.type.extend函数中找到。只需查找：

  Chart.Type.extend（{
 name：Bar，
  

并且在该函数中更靠下的位置将fillColor推送到datasetObject.bars。

现在只要像以前一样设置图表，除了为fillColor提供一个数组：

  function（$ scope）{
 $ scope.chartParams = {
 listOfLocations：['Trenzalore'，'Earth'，'Caprica'，'Sol'，'Tau Ceti']，
票：[[5,10,6,7,2]]，
系列：[尼斯地方]，
颜色：[{fillColor：[＃FF0000，＃00FF00 ，＃0000FF，＃00FFFF，＃FFFF00]}]，
选项：{barShowStroke：false} 
}; 
  

I've looked at How to change colours for Angular-Chart.js, but it relates to colours for an entire (dataset), not a specific bar.

What I'm looking for is a way to apply Different color for each bar in a bar chart; ChartJS to Angular.

So, I've got a bar chart:

<canvas id="locationBar" class="chart chart-bar" data="chartParams.votes" labels="chartParams.listOfLocations" series="chartParams.series" colours="chartParams.colours" options="chartParams.options"></canvas> 

With the following angular code (in a controller of course)

$scope.chartParams = {
    listOfLocations: ['Trenzalore','Earth','Caprica','Sol','Tau Ceti'],
    votes: [[5,10,6,7,2]],
    series: ["Nice Places"],
    colours: [{fillColor:getRandomColour()}],
    options: {barShowStroke : false}
};

where getRandomColour() would return a random colour.

Right now, the colours field applies this colour to all the bars:

when I actually want a different colour for each bar:

Plunker

解决方案

Plunker Demo

The easiest thing to do was to modify the chart.js source file to accept an array of colors for fillColor rather than a single color string.

If you could get one of the other proposed solutions working, I think it would end up having to be done in a very un-angular way.

Some people may not like tweaking the source, but for how simple and easy it was to do, and it achieves the desired result, and it isn't any less 'angular' in it's solution...let's just call it an improvement to chart.js.

Note that I only modified the "bar" chart to accept an array of colors, because it seems chart.js references the fillColor separately in each chart type. So you should be able to make this modification to work for any of the charts types.

The place you need to modify:

            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 : dataset.fillColor[index],   // <- added [index] here
                    highlightFill : dataset.highlightFill || dataset.fillColor,
                    highlightStroke : dataset.highlightStroke || dataset.strokeColor
                }));
            },this);

This block of code can be found in the Chart.type.extend function for the bar chart. Just look for this:

Chart.Type.extend({
        name: "Bar",

and look further down inside that function for the place where it pushes the fillColor to the datasetObject.bars.

Now just set up your chart like before, except feed it an array for fillColor:

function($scope){
          $scope.chartParams = {
        listOfLocations: ['Trenzalore','Earth','Caprica','Sol','Tau Ceti'],
        votes: [[5,10,6,7,2]],
        series: ["Nice Places"],
        colours: [{fillColor:["#FF0000", "#00FF00", "#0000FF", "#00FFFF", "#FFFF00"]}],
        options: {barShowStroke : false}
      };
        }

这篇关于如何在angular-chart.js中为每个条设置不同的颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！