angular-chartjs条形图中每列的颜色不同

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

我正在我正在进行的项目中使用angular-chartJS，并且我需要为条形图中的每个条形图使用不同的颜色。

Canvas:

帆布：

<canvas id="bar" class="chart chart-bar" data="medal_data" labels="medal_ticks"></canvas>

Controller:

控制器：

$scope.medal_ticks = ['Gold', 'Silver', 'Bronze', 'Not passed'];
$scope.series = ['Medaljer'];
$scope.medals_colours= ['#087D76', '#B3BC3A', '#38B665', '#8B4A9D'];

$scope.medal_data = ['1', '5', '2', '0'];

I've tried to add the attribute colours="medals_colours" to my canvas, the only problem is that it uses only the first colour in the array, and what I want is that each colour represents each column. So #087D76 is used to represent Gold, #B3BC3A for Silver, and so on

我试图在我的画布上添加属性colors =“medals_colours”，唯一的问题是它只使用数组中的第一种颜色，而我想要的是每种颜色代表每一列。因此，＃087D76用于表示Gold，＃B3BC3A用于表示Silver，依此类推

1 个解决方案

#1

As you want to give different color for each bar in graph, you are passing those value in array. But the thing is chart.js doesn't support such type of feature.

由于您希望为图形中的每个条形图提供不同的颜色，因此您将在数组中传递这些值。但事情是chart.js不支持这种类型的功能。

Reason

The color which we are able to see in bar area is nothing but fillColor option, If you look at the source code of chart.js Line

我们能够在条形区域看到的颜色只是fillColor选项，如果你看一下chart.js Line的源代码

Code

码

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, //<--This line responsible for filling color
        highlightFill: dataset.highlightFill || dataset.fillColor,
        highlightStroke: dataset.highlightStroke || dataset.strokeColor
    }));
}, this);

Above code clearly says that fillColor required string. In anyway the you can pass only one color in that string. And only one color will get applied to bar series. If we want to make you requirement workable then we need to make changes in chart.js.

上面的代码清楚地表明fillColor需要字符串。无论如何，你只能传递该字符串中的一种颜色。只有一种颜色适用于条形系列。如果我们想让您的需求可行，那么我们需要在chart.js中进行更改。

Changes to be made in chart.js

We need to make change in this line from fillColor: dataset.fillColor, to fillColor: dataset.fillColor[index], so that we can pass color array which needs to be applied on each bar of chart. index variable of .each will ensure the color would be applied on Bar in order way which we had given in array. Our color would be changed to $scope.medals_colours = [{fillColor:['#087D76', '#B3BC3A', '#38B665', '#8B4A9D']}];.

我们需要在fillColor：dataset.fillColor和fillColor：dataset.fillColor [index]中对这一行进行更改，以便我们可以传递需要应用于每个图表条上的颜色数组。 .each的索引变量将确保颜色将按照我们在数组中给出的方式应用于Bar。我们的颜色将更改为$ scope.medals_colours = [{fillColor：['＃087D76'，'＃B3BC3A'，'＃38B665'，'＃8B4A9D']}];。

Changed code

更改了代码

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] || dataset.fillColor, //<--getting color using index
        highlightFill: dataset.highlightFill || dataset.fillColor,
        highlightStroke: dataset.highlightStroke || dataset.strokeColor
    }));
}, this);

Markup

标记

  <div class="graph-display" ng-controller="jsonServerBox">
    <canvas id="bar" class="chart chart-bar" data="medal_data" labels="medal_ticks" 
    colours="medals_colours"></canvas>
  </div>

Controller

调节器

  app.controller('jsonServerBox', function($scope) {

    $scope.medal_ticks = ['Gold', 'Silver', 'Bronze', 'Not passed'];
    $scope.series = ['Medaljer'];
    $scope.medals_colours = [{fillColor:['#087D76', '#B3BC3A', '#38B665', '#8B4A9D']}];

    $scope.medal_data = [['1', '5', '2', '0']];
  });

I know it does look hacky but we have to make it.

我知道它确实看起来很黑，但我们必须做到。

Kudos goes to @tpie this answer

Kudos去找@tpie这个答案

Demo Plunkr

演示Plunkr