angular-chartjs柱状图中每个列有不同的颜色

Question

angular-chartjs柱状图中每个列有不同的颜色

javascriptangularjsbar-chartchart.jsangular-chart

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"添加到我的画布中，唯一的问题是它只使用数组中的第一种颜色，我希望每种颜色代表每一列。因此，#087D76用于表示Gold，#B3BC3A用于表示Silver等。

- Backer

我相信你需要这个：http://plnkr.co/edit/J1cDvM90YGOAmg5CLn3T?p=preview。稍后我会添加解释。 - Pankaj Parkar

@pankajparkar 这正是我所需要的。谢谢！在此期间，我会尽力找出我所缺少的东西。 - Backer

我会在一个小时后添加答案，请不要花时间等待。你一定会卡住的。我会更新一个带有解释的答案。 - Pankaj Parkar

请检查我添加的答案，如果有任何疑问，请告诉我。 - Pankaj Parkar

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pankaj Parkar · Accepted Answer

如果您想在图表中为每个条形图设置不同的颜色，您需要将这些值传递给数组。但是，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],，以便我们可以传递需要应用于图表每个条形的颜色数组。 .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']];
  });

我知道这看起来很hacky，但我们必须这样做。

赞赏@tpie的努力 这个答案 Demo Plunkr演示。