Vue ChartKick-条形图的不同颜色 [英] Vue ChartKick - different colours for bar chart

问题描述

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

I use a vertical bar chart and I want to specify different colors for each bar:

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>

但是仅使用第一种颜色，并且所有条形都具有相同的颜色.

But only the first color is used and all bars have the same colour.

我也尝试传递带有backGround颜色参数的:library 属性，但没有运气.折线图接受不同的颜色.

I tried to pass a :library attribute with backGround colour parameter as well without luck. Line chart accepts different colours.

推荐答案

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

It will work if you define :colors as a nested array as follows:

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

请查看以下 StackBlitz

这篇关于Vue ChartKick-条形图的不同颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！