chartjs 2+ 막대 차트 채색을 지정하는 방법

Question

이 작업을 수행하지 못하고 색상이 항상 무작위이지만 다음 라이브러리를 사용하여 막대 차트의 색상을 지정하려고합니다. 데이터가 정상적으로 작동합니다. 아래에로드 된 버전과 순서를 포함했습니다. 희망이 도움이됩니다.

도움을 주시면 감사하겠습니다. 2.3 :

많은 감사,

코드

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

라이브러리 버전을

• AngularJS와 v1.5.0 - rc.2
• Chart.js 버전을 니펫을. 0
• 각-chart.js 버전 : 최종 솔루션

  노트

  <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.1.1

HTML 태그는 최종 작업 솔루션은 각도를 사용하여 컨트롤러의 색상을 설정합니다 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를 사용하여 색상을 설정할 수 있습니다 (documentation 참조) :

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

이제 마지막으로 작업 할 수없는 옵션은 실제로 사용되는 것과 관계가없는 다른 Chart 개체를 업데이트합니다. 그러나 Chart.defaults.global.colors 접근 방식이 적용됩니다 (업데이트 된 demo 참조).