Vue ChartKick - разные цвета для гистограммы - PullRequest
Новая
       40

Vue ChartKick - разные цвета для гистограммы

1 голос
/ 09 апреля 2020

Я использую вертикальную гистограмму и хочу указать разные цвета для каждого бара:

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>

Но используется только первый цвет, и все столбцы имеют одинаковый цвет.

enter image description here

Я попытался передать атрибут :library с Цветовой параметр backGround также без везения. Линейный график принимает разные цвета.

1 Ответ

2 голосов
/ 10 апреля 2020

Это будет работать, если вы определите :colors как вложенный массив следующим образом: 

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

enter image description here

Пожалуйста, посмотрите на следующее StackBlitz

...