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

Question

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

Canvas:

<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" 添加到我的 canvas，唯一的问题是它只使用数组中的第一种颜色，而我想要的是每种颜色代表每一列。所以#087D76用来表示Gold，#B3BC3A表示Silver，以此类推

Answer 1

由于您想为图表中的每个条形赋予不同的颜色，因此您将这些值传递到数组中。但问题是 chart.js 不支持此类功能。

原因

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

代码

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

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

中进行更改

将在 chart.js

中进行更改

我们需要将 this line 从 fillColor: dataset.fillColor, 更改为 fillColor: dataset.fillColor[index], 以便我们可以传递需要应用于图表每个柱的颜色数组。 .each 的 index 变量将确保颜色将按照我们在数组中给出的顺序应用于条形图。我们的颜色将更改为 $scope.medals_colours = [{fillColor:['#087D76', '#B3BC3A', '#38B665', '#8B4A9D']}];.

更改代码

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

标记

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

控制器

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

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

感谢@tpie

Demo Plunkr

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

Different color for each column in angular-chartjs bar chart

javascript

bar-chart

angularjs

chart.js

angular-chart

原因

将在 chart.js