【问题标题】:How can I set different colours for each bar in angular-chart.js v1.0.0?如何在 angular-chart.js v1.0.0 中为每个条设置不同的颜色?
【发布时间】:2016-07-27 16:07:14
【问题描述】:

如何在 angular-chart.js v1.0.0 和 ChartJS v2.1.6 中做到这一点

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

【问题讨论】:

  • 链接的答案应有尽有……您还想要什么?
  • 我希望在上面的版本中进行这项工作,因为上一篇文章是关于 angular-chart.js v0.x.x 和 ChartJS v1.0.x

标签: angularjs colors bar-chart chart.js angular-chart


【解决方案1】:
  • 为每个柱使用一个数据集
  • 将数据集的所有数据设置为 0,但要显示的数据除外
  • 每个数据集的自定义颜色
  • BorderWidth = 0 隐藏 empy 数据,stacked = true 在 X 轴上
  • 自定义工具提示回调以隐藏空数据集

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

【讨论】:

  • 完美解决方案!太感谢了!我不能投票:(在你的解决方案中,我没有声誉......
  • @jesus.saad:即使您不能对答案投赞成票,您也应该能够将其标记为接受。
【解决方案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)'
},

];

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

【讨论】:

    猜你喜欢
    • 2015-07-12
    • 1970-01-01
    • 1970-01-01
    • 2020-07-01
    • 1970-01-01
    • 1970-01-01
    • 2012-10-15
    • 1970-01-01
    • 2021-08-15
    相关资源
    最近更新 更多