Question

我正在尝试更改chart.js中堆积条形图选取的默认颜色，以下是我的代码。我仍然看到它没有拿起我定义的颜色

  <div style="display: block">
                        <canvas baseChart
                                [datasets]="barChartData"
                                [labels]="barChartLabels"
                                [options]="barChartOptions"
                                [legend]="barChartLegend"
                                [chartType]="barChartType"></canvas>
                    </div>

.TS

      public barChartOptions:any = {
        scaleShowVerticalLines: false,
        responsive: true,
        scales: {
                xAxes: [{
                    stacked: true
                }],
                yAxes: [{
                    stacked: true
                }]
            }
      };

      public barChartLabels:string[] = ['01/27', '01/29', '01/31', '02/01', '02/03', '02/05', '02/07'];
      public barChartType:string = 'bar';
      public barChartLegend:boolean = true;

    public barChartColors:string[] = ['rgba(255, 99, 132, 0.2)','#9CC463','#E65E72','#F2A950','#A9559A','#42B6CD']
  public barChartData:any[] = [
    {data: [0, 0, 1, 0, 0, 1, 0], label: 'Email Clicks', backgroundColor: this.barChartColors},
    {data: [0, 0, 0, 0, 0, 1, 0], label: 'External Activites', backgroundColor: this.barChartColors},
    {data: [0, 0, 2, 0, 0, 8, 0], label: 'Form Submissions', backgroundColor:this.barChartColors},
    {data: [1, 2, 4, 1, 1, 6, 1], label: 'Email Sends', backgroundColor:this.barChartColors},
    {data: [0, 0, 0, 5, 0, 13, 0], label: 'Web Page Visits', backgroundColor:this.barChartColors},
    {data: [0, 0, 3, 0, 0, 2, 0], label: 'Email Opens', backgroundColor:this.barChartColors}
  ];

Answer 1

每个数据点都需要背景颜色：

e.g。

{data: [0, 0, 1, 0, 0, 1, 0], label: 'Email Clicks', backgroundColor:[rgb(0, 0, 0), rgb(0, 0, 0), rgb(0, 0, 0), rgb(0, 0, 0), rgb(0, 0, 0), rgb(0, 0, 0)]'}

如果您打算为每个数据点使用相同的颜色，您可以动态创建数组，而不是复制和粘贴所有数据。

Answer 2

这是ng2-charts？

将其添加到canvas标记：

[colors]="barChartColors"

barChartColors中的每个元素都映射到与barChartData中的条目相同的索引

您不需要在每个barChartData中放置backgroundColor。

chartjs堆栈条形图颜色不起作用

2 个答案: