Vue ChartKick - 条形图的不同颜色

Question

我使用的是垂直条形图，我想为每个条形指定不同的颜色：

main.js

import Chartkick from 'vue-chartkick';
import Chart from 'chart.js';
Vue.use(Chartkick.use(Chart));

File.vue

<column-chart :data="chartData" width="800px" :colors="['#0b6e00', '#006ca2', '#ff3333', '#d60001']"></column-chart>

但只使用了第一种颜色，所有条形都具有相同的颜色。

我也尝试传递带有背景颜色参数的 :library 属性，但没有成功。折线图接受不同的颜色。

Answer 1

如果您将 :colors 定义为嵌套数组，它将起作用，如下所示：

<column-chart 
  :data="chartData" 
  width="800px" 
  :colors="[['#0b6e00', '#006ca2', '#ff3333', '#d60001']]">
</column-chart>

Vue ChartKick - different colours for bar chart