如何在angular-chart.js v1.0.0中为每个条设置不同的颜色？

Question

我怎样才能在angular-chart.js v1.0.0和课程ChartJS v2.1.6中做到这一点

How can I set different colours for each bar in angular-chart.js?

Answer 1

• 为每个栏使用一个数据集
• 将数据集的所有数据设置为0，但要显示的数据除外
• 每个数据集的自定义颜色
• BorderWidth = 0隐藏empy数据，stack = true在X ax
• 自定义工具提示回调以隐藏空数据集

example https://jsfiddle.net/3qas1ar8/3/

Answer 2

 public barChartColors: Array<any> = [

{
  **backgroundColor: ["#36a2eb", "rgba(47, 132, 71, 0.8)", "rgba(30, 50, 71, 0.8)", "green", "blue", "purple", "orange"
  ],**

  borderColor: 'rgba(105,159,177,1)',

  pointBackgroundColor: 'rgba(105,159,177,1)',

  pointBorderColor: '#fafafa',

  pointHoverBackgroundColor: '#fafafa',

  pointHoverBorderColor: 'rgba(105,159,177)'
},

];

这将为条形图中的每个条提供不同的颜色。