Разный цвет для каждого столбца в гистограмме 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

Код

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

Я знаю, это выглядит неприлично, но мы должны это сделать.

Престижность идет в @tpie этот ответ

Демо Планкр