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

Question

我正在我正在进行的项目中使用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"到我的画布,唯一的问题是它只使用数组中的第一种颜色,我想要的是每种颜色代表每一列.所以,#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中进行更改

我们需要改变这条线从fillColor: dataset.fillColor,以fillColor: dataset.fillColor[index],这样我们就可以通过颜色阵列需要图的每个栏上应用.index变量.each将确保颜色将按照我们在数组中给出的方式应用于Bar.我们的颜色会改为$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']];
  });

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

Kudos去找@tpie 这个答案

演示Plunkr