如何为 angular-chart.js 中的每个栏设置不同的颜色？

Question

我看过，但它涉及整个（数据集）的颜色，而不是特定条形。

我正在寻找的是一种将 Different color for each bar in a bar chart; ChartJS 应用于 Angular 的方法。

所以，我有一个条形图：

<canvas id="locationBar" class="chart chart-bar" data="chartParams.votes" labels="chartParams.listOfLocations" series="chartParams.series" colours="chartParams.colours" options="chartParams.options"></canvas>

使用以下 angular 代码（当然在控制器中）

$scope.chartParams = {
    listOfLocations: ['Trenzalore','Earth','Caprica','Sol','Tau Ceti'],
    votes: [[5,10,6,7,2]],
    series: ["Nice Places"],
    colours: [{fillColor:getRandomColour()}],
    options: {barShowStroke : false}
};

其中 getRandomColour() 会 return 随机颜色。

现在，colours 字段将此颜色应用于所有条形：

当我真的想要每个条形不同的颜色时：

Plunker

Answer 1

Plunker Demo

最简单的方法是修改 chart.js 源文件以接受 fillColor 的颜色数组而不是单个颜色字符串。

如果您能让其他提议的解决方案中的一个起作用，我认为它最终将不得不以一种非常不 angular 的方式来完成。

有些人可能不喜欢调整源代码，但因为这样做是多么简单和容易，而且它达到了预期的结果，而且它的解决方案也不亚于 'angular'...我们就称它为 chart.js.

的改进吧

请注意，我只修改了 "bar" 图表以接受一组颜色，因为似乎 chart.js 在每种图表类型中分别引用了 fillColor。因此，您应该能够进行此修改以适用于任何图表类型。

需要修改的地方：

            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],   // <- added [index] here
                    highlightFill : dataset.highlightFill || dataset.fillColor,
                    highlightStroke : dataset.highlightStroke || dataset.strokeColor
                }));
            },this);

此代码块可以在条形图的 Chart.type.extend 函数中找到。只需寻找这个：

Chart.Type.extend({
        name: "Bar",

并在该函数内部进一步查看将 fillColor 推送到 datasetObject.bars 的位置。

现在只需像以前一样设置您的图表，除了为它提供一个 fillColor 数组：

function($scope){
          $scope.chartParams = {
        listOfLocations: ['Trenzalore','Earth','Caprica','Sol','Tau Ceti'],
        votes: [[5,10,6,7,2]],
        series: ["Nice Places"],
        colours: [{fillColor:["#FF0000", "#00FF00", "#0000FF", "#00FFFF", "#FFFF00"]}],
        options: {barShowStroke : false}
      };
        }

Answer 2

Chart 库的一个更大的问题是你迟早会碰壁，这只能通过黑客攻击或扩展库来突破。知道您撞到了那堵墙以及该怎么做可能就是这个问题的答案。

即使您可以创建自定义 chart.js 图表，您也可以使用 d3.js 解决它。我采用了一个基本的 angular d3.js 条形图示例并添加了您想要的行为：

var colors = d3.scale.category10();

// ...

bars.enter().append('rect')
    .classed('bar', true)
    .attr({x: chartW,
           width: barW,
           y: function(d, i) { return y1(d); },
           height: function(d, i) { return chartH - y1(d); },
           fill: function(d,i) { return colors(i) }
    })
// ...

http://plnkr.co/edit/9RCYAPCEj9iRsxkkYPaV?p=preview

以任何方式自定义图表，例如更改填充、描边或其他任何内容都触手可及。虽然仍然有很多代码，但如果您想在库支持之外进行自定义，那么代码总是很多。

Answer 3

使用最新版本的 angular-chart.js，这是一个根据条件更改颜色的示例，而不修改库本身。相反，它使用 chart-dataset-override 功能。

诀窍是使用只有一个数据集的系列。

HTML

<div ng-controller="chartControl">
  <canvas id="bar" class="chart chart-bar" 
    chart-data="goal.data" 
    chart-labels="goal.labels" 
    chart-options="goal.options" 
    chart-series="goal.series" 
    chart-dataset-override="goal.datasetOverride"></canvas>
</div>

JavaScript

在控制器中添加以下代码：

  var exceeded = '#27ae60';
  var achieved = '#bdc3c7';
  var defeated = '#e74c3c';

  $scope.goal = [];
  $scope.goal.goal = 3;

  $scope.goal.series = [ 'Visits' ];
  $scope.goal.labels = [
    'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'
  ];
  $scope.goal.data = [
    [5, 2, 3, 3, 3, 4, 2, 3, 4],
  ];

  var backgroundColours = [];

  // Assign the background colour based on whether the goal was achieved.
  for( var i = 0; i < $scope.goal.data[0].length; i++ ) {
    var v = $scope.goal.data[0][i];

    if( v > $scope.goal.goal ) {
      backgroundColours[i] = exceeded;
    }
    else if( v < $scope.goal.goal ) {
      backgroundColours[i] = defeated;
    }
    else {
      backgroundColours[i] = achieved;
    }
  } 

  // Create a place to hold the background colours.
  $scope.goal.datasetOverride = [{ backgroundColor: [] }];

  // Assign the colours to the pre-populated array.
  $scope.goal.datasetOverride[0].backgroundColor = backgroundColours;

  $scope.goal.options = {
    barShowStroke: false,
    scales: {
      yAxes: [{
        ticks: {
          min: 0,
          max: 7,
          stepSize: 1
        }
      }]
    }
  };

输出

生产：

如何为 angular-chart.js 中的每个栏设置不同的颜色？

How can I set different colours for each bar in angular-chart.js?

javascript

charts

bar-chart

angularjs

HTML

JavaScript

输出

相关链接