如何修改ng2-charts中柱状图的边框颜色？

嘿，我懂你的困扰——想给ng2-charts的柱状图自定义颜色，但官网居然没给柱状图的自定义颜色示例！不过别慌，折线图那套colors属性的配置逻辑完全能套用到柱状图上，我帮你调整成适配柱状图的版本：

首先在组件类里定义适配柱状图的颜色配置数组（去掉折线图专属的点样式属性，保留柱状图需要的样式）：

// 组件类中的颜色配置
public barChartColors: Array<any> = [
  {
    // 柱状图填充背景色（带透明度）
    backgroundColor: 'rgba(148,159,177,0.2)',
    // 柱状图边框颜色
    borderColor: 'rgba(148,159,177,1)',
    // 边框宽度
    borderWidth: 1,
    // 鼠标 hover 时的填充色
    hoverBackgroundColor: 'rgba(148,159,177,0.4)',
    // 鼠标 hover 时的边框色
    hoverBorderColor: 'rgba(148,159,177,1)'
  }
];

然后在模板的柱状图组件上绑定这个colors属性就行：

<canvas baseChart
        [datasets]="barChartData"
        [labels]="barChartLabels"
        [chartType]="'bar'"
        [colors]="barChartColors" <!-- 绑定自定义颜色配置 -->
        [options]="barChartOptions">
</canvas>

小提示：如果你的柱状图有多个数据集，只需要在barChartColors数组里添加对应数量的颜色对象，每个对象会对应一个数据集的样式哦！

内容的提问来源于stack exchange，提问作者Shawn Mercado