Chart.js Ionic 2 Angular2 : 막대 그래프의 배경색이 변경되지 않습니다.

Question

Ionic2 및 Angular2를 사용하는 하이브리드 응용 프로그램의 스택 막대 그래프를 만들기 위해 Chart.js를 사용하고 있습니다. 변경할 그래프의 배경색을 채우거나 막대의 색을 칠할 수 없습니다. chart.js documentation에있는 모든 구성/예를 사용했으며, 항상 기본 빨간색 및 파란색 기본 (?) 색상을 사용합니다.

barChartOptions:any = { 
    responsive: true, 
    scales: { 
     xAxes: [{ 
     categoryPercentage: 0.6, 
     barPercentage: 1.0, 
     stacked: true, 
     ticks: { 
      beginAtZero: true 
     }, 
     gridLines: { 
      color: "rgba(255,255,255,1.0)", 
      zeroLineColor: "rgba(254,254,254, 1.0)" 
     } 
     }], 
     yAxes: [{ 
     display: false, 
     ticks: { 
      beginAtZero: true 
     } 
     }] 
    }, 
    legend: { 
     display: false, 
    } 
}; 
barChartLabels:string[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012']; 
barChartType:string = 'bar'; 
barChartLegend:boolean = false;; 

barChartData:any[] = [ 

    { 
     fillColor:'rgba(255, 99, 132, 0.2)', 
     borderColor: "rgba(10,150,132,1)", 
     borderWidth: 5, 
     data: [65, 59, 80, 81, 56, 55, 40], 
    }, 
    { 
     backgroundColor: '#61ae37', 
     data : [190,150,125,185,150,135,175] 
    } 
]; 

문제가 fillColor 또는 barChartData 객체의 backgroundColor 필드입니다 : 여기

내가 가진 것입니다. 나는이 문서에서 시도했습니다

다른 CONFIGS은 다음과 같습니다

data: [12, 19, 3, 5, 2, 3], 
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)' 
], 
borderColor: [ 
    'rgba(255,99,132,1)', 
    'rgba(54, 162, 235, 1)', 
    'rgba(255, 206, 86, 1)', 
    'rgba(75, 192, 192, 1)', 
    'rgba(153, 102, 255, 1)', 
    'rgba(255, 159, 64, 1)' 
], 
borderWidth: 1 

나는 또한 테두리 색상 내가 테두리 너비 변경 얻을 수 있지만 변경할 수 없습니다.

나는 또한 사각형 구성으로 변경해 보았습니다. 수익률 없음. 내가 복사

원래의 코드였다이 :

var data = { 
    labels: ["January", "February", "March", "April", "May", "June", "July"], 
    datasets: [ 
     { 
      label: "My First dataset", 
      backgroundColor: "rgba(255,99,132,0.2)", 
      borderColor: "rgba(255,99,132,1)", 
      borderWidth: 1, 
      hoverBackgroundColor: "rgba(255,99,132,0.4)", 
      hoverBorderColor: "rgba(255,99,132,1)", 
      data: [65, 59, 80, 81, 56, 55, 40], 
     } 
    ] 
}; 

내 추측 내 설정보다 우선 순위가 걸리는 몇 가지 기본 구성 있다는 것입니다. 어떤 도움이라도 대단히 감사하겠습니다.

Answer 1

문제점을 파악했습니다. 나는 ng2-charts을 사용하고 있으며 그들의 구성은 미묘하게 다릅니다. 그들은 색상을 추가하는 html 마크 업에서 [colors] 필드를 사용합니다. 따라서 차트 옵션 개체의 색상 바깥쪽에 대해 .ts 파일에 추가 객체를 만듭니다.

barChartColors: any [] =[ 
    { 
     backgroundColor:'rgba(255, 99, 132, 1)', 
     borderColor: "rgba(10,150,132,1)", 
     borderWidth: 5 
    }, 
    { 
     backgroundColor:'rgb(97 174 55, 1)', 
     borderColor: "rgba(10,150,132,1)", 
     borderWidth: 5, 
    } 
] 

는 그리고 마크 업에는 다음과 같습니다

는

<base-chart class="chart" 
      [datasets]="barChartData" 
      [labels]="barChartLabels" 
      [options]="barChartOptions" 
      [colors]="barChartColors" <-----this is the kicker 
      [legend]="barChartLegend" 
      [chartType]="barChartType" 
      [responsive]='false' 
      (chartHover)="chartHovered($event)" 
      (chartClick)="chartClicked($event)"> 

      </base-chart>