如何在ng2图表中更改背景颜色

时间:2019-04-29 12:12:01

标签: angular chart.js ng2-charts

我正在使用ng2-图表绘制堆叠的条形图。但是我无法更改条形图的默认背景颜色。

Stackblitz link

试图将背景色属性添加到图表数据集,但是不起作用。

已更新: 工作演示:stackblitz

1 个答案:

答案 0 :(得分:1)

我认为,colors属性可以执行此操作。 只需传递一组颜色对象(refer here to see the object

here is a working example

像这样在HTML中添加输入:

<div style="display: block;">
   <canvas baseChart 
      [datasets]="barChartData"
      [labels]="barChartLabels"
      [options]="barChartOptions"
      [plugins]="barChartPlugins"
      [legend]="barChartLegend"
      [chartType]="barChartType"
      [colors]="colors">//<---------------the colors input property
   </canvas>
</div>

然后只需在ts文件中添加下一个对象:

  public colors = [
    { backgroundColor:"red" },
    { backgroundColor:"green" },
    { backgroundColor:"blue" },
    { backgroundColor:"yellow" }
  ];