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

Question

我看过如何更改Angular-Chart.js的颜色,但它与整个(数据集)的颜色有关,而不是特定的栏.

我正在寻找的是一种在条形图中为每个条形应用不同颜色的方法; 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> 

使用以下角度代码(当然在控制器中)

$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()会返回一个随机颜色.

现在,该colours字段将此颜色应用于所有条形:

当我真的想要每个酒吧有不同的颜色时:

Plunker

Answer 1

使用最新版本的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
        }
      }]
    }
  };

产量

生产:

相关链接

• http://jtblin.github.io/angular-chart.js/examples/dataset-override.html
• http://jtblin.github.io/angular-chart.js/examples/dataset-override.js
• http://plnkr.co/edit/bnbZFXVlq4pX1BL5slqR?p=preview
• https://jsbin.com/bekugurasi/1/edit?html,js,console,output

Answer 2

Plunker演示

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

如果你能得到其他提议的解决方案之一,我认为最终必须以非常不成角度的方式完成.

有些人可能不喜欢调整源代码,但是它有多么简单易行,并且它实现了预期的结果,并且它的解决方案中没有任何"角度"......让我们称之为改进chart.js之.

请注意,我只修改了"条形图"以接受颜色数组,因为看起来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}
      };
        }