Question

我想更改图表的颜色，但是无法更改。任何帮助将不胜感激。

我尝试为数据集提供颜色值，但似乎不起作用。

我的html模板

  <div style="display: block">
    <canvas style="position: relative; height:140vh; width:80vw;" baseChart [datasets]="barChartData"
      [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChartType">

    </canvas>
  </div>
</div>

我的组件文件

public barChartOptions = {
    scaleShowVerticalLines: false,
    responsive: true,

  };
  public barChartLabels = [];
  public barChartType = 'bar';
  public barChartLegend = true;
  public barChartData: any = [{
    data: [],
    label: ''
  }];
  pageNo: number = 1;
  moviedata = [];
  datasets: [
    {

      borderColor: '#3cba9f',
      fill: false
    }
  ]

我想更改栏的颜色，边框颜色和文本。预先谢谢！。

Answer 1

颜色等可以与数据一起设置在数据集内，例如：public barChartData: ChartDataSets[] = [{data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A', backgroundColor: 'lightgreen', hoverBorderColor: 'green', borderColor: '#000'}, {...} }

与样式相关的 TS 是：

 public barChartOptions: ChartOptions = {
    responsive: true,
    // We use these empty structures as placeholders for dynamic theming.
    scales: { xAxes: [{}], yAxes: [{}] },
    plugins: {
      datalabels: {
        anchor: 'end',
        align: 'end',
      }
    }
  };
  public barChartLabels: Label[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
  public barChartType: ChartType = 'bar';
  public barChartLegend = true;
  public barChartPlugins = [pluginDataLabels];

  public barChartData: ChartDataSets[] = [
    {
      data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A'
      , backgroundColor: 'lightgreen', hoverBorderColor: 'green', borderColor: '#000'
    },
    {
      data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B'
      , backgroundColor: 'lightblue', hoverBorderColor: 'blue', borderColor: '#000'
    }
  ];

Angular：如何更改chartjs的颜色？

1 个答案: