chartjs 2+ как указать гистограмму раскраски

Question

Я пытаюсь покрасить свою гистограмму, используя следующие библиотеки, хотя я не получаю эту работу, и цвета всегда случайны. Данные отлично работают. Я включил какие версии и порядок, которые они загружают ниже. Надеюсь это поможет.

Любая помощь очень ценится.

Большое спасибо,

Фрагмент кода

<script src="js/chartjs/Chart.js" defer></script> 
<script src="js/angular-chart/angular-chart.min.js" defer></script> 

версии библиотек

• AngularJS v1.5.0-
РК-2
• Chart.js Версия: 2.3. 0
• угловой chart.js Версия: 1.1.1

HTML-разметки

<canvas id="line" class="chart chart-bar" chart-color="backgroundColour: 'Red'" chart-data="vm.chartData.data" chart-labels="vm.chartData.legends" chart-series="vm.series" chart-options="vm.options" chart-dataset-override="vm.datasetOverride" chart-click="vm.onClick"></canvas> 

Конечный раствор отмечает

Конечный рабочий раствор устанавливает цвета в контроллере, используя угловые 1.5.8

Answer 1

Вы можете указать цвета в контроллере:

... 
$scope.vm.colors = [ '#f7464a', '#949FB1']; 
... 

, а затем на использование в диаграмме:

<canvas id="line" class="chart chart-bar" chart-colors="vm.colors" chart-data="vm.chartData.data" chart-labels="vm.chartData.legends" chart-series="vm.series" chart-options="vm.options" chart-dataset-override="vm.datasetOverride" chart-click="vm.onClick"></canvas> 

Малые demo

UPDATE:

Чтобы установить глобальные цвета вы можете установить Chart.defaults.global.colors или использовать ChartJsProvider и набор цветов в .config() следующим образом (см. documentation):

ChartJsProvider.setOptions({ colors : [ '#803690', '#00ADF9' ] }); 

Теперь, последний вариант, с которым я не мог работать, обновляет другой объект Chart, который не имеет отношения к тому, который фактически используется. Но подход Chart.defaults.global.colors работает, см. Обновленный demo.