2016-06-04 4 views
0

막대 차트의 각 막대는 chartjs 2.0 분기에서 각도 차트를 사용하여 다른 색상을 갖게합니까?막대 차트마다 각기 다른 색상을 갖는 차트 chart.js v2

내 캔버스는 다음과 같습니다

내 GBCC 컨트롤러는 다음과 같습니다
<canvas class="chart chart-bar" 
    chart-data="GBCC.setData" 
    chart-labels="GBCC.labels" 
    chart-options="GBCC.options" 
    chart-colors="GBCC.colors" 
    height="68" 
    width="300"> 
</canvas> 

:

this.labels = ['hello', 'world', 'foobar']; 
this.setData = [[50, 20, 95]]; 
this.colors = [ 
    '#DCDCDC', // light grey 
    '#F7464A', // red 
    '#46BFBD', // green 
]; 
this.options = { 
    scales: { 
    yAxes: [{ 
     display: true, 
     ticks: { 
     beginAtZero: true, 
     min: 0, 
     max: 100, 
     stepSize: 20 
     } 
    }] 
    } 
}; 

그것은 배열의 첫 번째 색상에 모든 막대를 변경할 수 있지만, 다른를 사용하지 않습니다 그림 물감. 어느 누구도이 일을하는 방법을 알고 있습니까? 이 지시어의 convertColor의 코드 리뷰에서입니다

this.color = [ 
    { backgroundColor: [ 
    '#DCDCDC', // light grey 
    '#F7464A', // red 
    '#46BFBD', // green 
    ]}; 

및 컬러 기능을 얻을 :

답변

1

이 지시어 https://jtblin.github.io/angular-chart.js/을 사용하는 경우 다음 시도하십시오.

라인 238 :

function convertColor (color) { 
    if (typeof color === 'object' && color !== null) return color; 
    if (typeof color === 'string' && color[0] === '#') return getColor(hexToRgb(color.substr(1))); 
    return getRandomColor(); 
} 

라인 249 :

function getColor (color) { 
    return { 
    backgroundColor: rgba(color, 0.2), 
    ... 
    };` 
} 

그리고 ChartJS의 막대 그래프 샘플 (http://www.chartjs.org/docs/#bar-chart-data-structure).

var data = { 
    ... 
    datasets: [ 
     { 
      ... 
      backgroundColor: [ 
       'rgba(255, 99, 132, 0.2)', 
       'rgba(54, 162, 235, 0.2)', 
       'rgba(255, 206, 86, 0.2)', 
       'rgba(75, 192, 192, 0.2)', 
       'rgba(153, 102, 255, 0.2)', 
       'rgba(255, 159, 64, 0.2)' 
      ], 
      ... 
     } 
    ] 
}; 

(및 부당한 직감.)

관련 문제