làm cách nào để thay đổi màu cho biểu đồ ng2?

Question

Tôi đã thêm ng2-charts vào dự án của tôi và hiển thị 2 biểu đồ - donut & barchart. cả hai đều hiển thị trong màu xám kể từ khi tôi thêm

<base-chart class="chart" 
       [colors]="chartColors" 
       ... 
    </base-chart> 

đến component.template.html và

public chartColors:Array<any> =[ 
    { 
     fillColor:'rgba(225,10,24,0.2)', 
     strokeColor:'rgba(11,255,20,1)', 
     pointColor:'rgba(111,200,200,1)', 
     pointStrokeColor:'#fff', 
     pointHighlightFill:'#fff', 
     pointHighlightStroke:'rgba(200,100,10,0.8)' 
    }, ... (3x) 

đến component.ts

bất kỳ nhập khẩu gói khác cần thiết để thay đổi màu sắc hoặc là thiết lập sai rồi? Chromes html thanh tra cho thấy đầu ra sau html rendered

ng-reflect-colors="[object Object],[object Object],[object Object]" 

Answer 1

Bạn nên làm điều này như:

public chartColors: Array<any> = [ 
    { // first color 
     backgroundColor: 'rgba(225,10,24,0.2)', 
     borderColor: 'rgba(225,10,24,0.2)', 
     pointBackgroundColor: 'rgba(225,10,24,0.2)', 
     pointBorderColor: '#fff', 
     pointHoverBackgroundColor: '#fff', 
     pointHoverBorderColor: 'rgba(225,10,24,0.2)' 
    }, 
    { // second color 
     backgroundColor: 'rgba(225,10,24,0.2)', 
     borderColor: 'rgba(225,10,24,0.2)', 
     pointBackgroundColor: 'rgba(225,10,24,0.2)', 
     pointBorderColor: '#fff', 
     pointHoverBackgroundColor: '#fff', 
     pointHoverBorderColor: 'rgba(225,10,24,0.2)' 
    }]; 

Grey màu được đặt theo mặc định, whats nghĩa tùy chọn màu sắc của bạn không hoạt động, vì tên các thuộc tính sai.

Ở đây bạn có ví dụ, làm thế nào màu sắc thuộc tính này được gọi là:

ng2-charts-github-source-code

Answer 2

Ngoài ra bạn có thể làm điều đó theo cách này:

<base-chart class="chart" 
      [colors]="chartColors" 
      ... 
</base-chart> 

và

public chartColors: any[] = [ 
     { 
     backgroundColor:["#FF7360", "#6FC8CE", "#FAFFF2", "#FFFCC4", "#B9E8E0"] 
     }];