代码之家 › 专栏 › 技术社区 › Sakkeer A

有什么方法可以改变ng2图表中的甜甜圈图表颜色吗?

ng2-charts customization colors canvas css

Sakkeer A · 技术社区 · 7 年前

我试着改变甜甜圈图表的颜色。

这是我的当前图表:

现在,我试着改变这些颜色如下 #fa72bc , #00bfff 和 #ffa500 .

我使用以下代码更改了“折线图”和“条形图”的颜色:

条形图:

public barChartColors:Array<any> =
[
  { // Pink
    backgroundColor: '#fa72bc'
  },
  { // Blue
    backgroundColor: '#00bfff'
  },
  { // Orange
    backgroundColor: '#ffa500'
  },
  { // Green
    backgroundColor: '#3ec351'
  }
];

自定义图表:

折线图:

public lineChartColors:Array<any> = 
[
  { // grey
    backgroundColor: 'rgba(148,159,177,0.2)',
    borderColor: 'rgba(148,159,177,1)',
    pointBackgroundColor: 'rgba(148,159,177,1)',
    pointBorderColor: '#fff',
    pointHoverBackgroundColor: '#fff',
    pointHoverBorderColor: 'rgba(148,159,177,0.8)'
  },
  { // dark grey
    backgroundColor: 'rgba(77,83,96,0.2)',
    borderColor: 'rgba(77,83,96,1)',
    pointBackgroundColor: 'rgba(77,83,96,1)',
    pointBorderColor: '#fff',
    pointHoverBackgroundColor: '#fff',
    pointHoverBorderColor: 'rgba(77,83,96,1)'
  },
  { // grey
    backgroundColor: 'rgba(148,159,177,0.2)',
    borderColor: 'rgba(148,159,177,1)',
    pointBackgroundColor: 'rgba(148,159,177,1)',
    pointBorderColor: '#fff',
    pointHoverBackgroundColor: '#fff',
    pointHoverBorderColor: 'rgba(148,159,177,0.8)'
  }
];

我试过用同样的条形图编码做甜甜圈图。但是,这就是我得到的。

我想用不同的颜色自定义图表。但是,图表只显示一种颜色。我不知道怎么解决这个问题。你能帮助我吗。

提前谢谢。。。:)

1 回复 | 直到 7 年前

keerthi 7 年前

试试这个例子,

   <canvas baseChart
          [data]="doughnutChartData"
          [labels]="doughnutChartLabels"
          [backgroundColor]="doughnutColors"
          [chartType]="doughnutChartType"
          (chartHover)="chartHovered($event)"
          (chartClick)="chartClicked($event)"></canvas>


    private donutColors=[
    {
     backgroundColor: [
    'rgba(110, 114, 20, 1)',
     'rgba(118, 183, 172, 1)',
     'rgba(0, 148, 97, 1)',
     'rgba(129, 78, 40, 1)',
     'rgba(129, 199, 111, 1)'
     ]
     }
     ];

推荐文章

Sarah Marie · 单击按钮,用随机颜色/大小将每个字母设置为字符串样式

3 年前

Malak · 为参数的|省道颤振指定颜色值

3 年前

elliot · 如何更改ggplot中geom\u line()中线条的颜色顺序

8 年前

KTietjen · 一张ggplot2地图上的两个独立颜色渐变色比例

8 年前

oudekaas · 基于百分比宽度更改颜色的进度条

8 年前

Eruditio · 直方图轴散点图中的颜色密度

8 年前

AAM · 使用引导更改导航栏上文本的颜色

8 年前

austinm98 · J按钮颜色不变

8 年前

KevinM · 同一页面中的多个SVG问题-消失和颜色更改

8 年前

Wolk · 交替颜色onClick

8 年前