7

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

帆布：

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

控制器：

$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'];

我试图将属性添加colours="medals_colours"到我的画布中，唯一的问题是它只使用数组中的第一种颜色，而我想要的是每种颜色代表每一列。So#087D76用于表示Gold、#B3BC3AforSilver等

4

1 回答 1

5

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.

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

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.

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

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

Demo Plunkr

于 2015-05-27T16:46:18.740 回答