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

问题描述

我查看了

解决方案

Plunker Demo

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

如果你能让其他提议的解决方案之一起作用，我认为它最终将不得不以一种非常非角度的方式来完成.

有些人可能不喜欢调整源代码，但它是多么简单和容易，而且它达到了预期的结果，而且它的解决方案并没有减少有角度的"......让我们称之为对 chart.js 的改进.

请注意，我只修改了条形"图表以接受颜色数组，因为似乎chart.js 在每种图表类型中分别引用了fillColor.因此，您应该能够进行此修改以适用于任何图表类型.

需要修改的地方:

 helpers.each(dataset.data,function(dataPoint,index){//为每条数据添加一个新点，传递任何需要的数据进行绘制.datasetObject.bars.push(new this.BarClass({值:数据点，标签:数据标签[索引]，数据集标签:数据集.标签，strokeColor : dataset.strokeColor,fillColor : dataset.fillColor[index],//<- 在这里添加了[index]高亮填充:dataset.highlightFill ||数据集.fillColor，highlightStroke : dataset.highlightStroke ||数据集.strokeColor}));}，这);

此代码块可在条形图的 Chart.type.extend 函数中找到.只需寻找这个:

Chart.Type.extend({名称: "酒吧",

并在该函数内部进一步向下查看将 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屋！