Как установить несколько цветов для столбцов в горизонтальной гистограмме ApexCharts (режим спарклайна)?
Я пытаюсь создать горизонтальную гистограмму, используя ApexCharts в режиме спарклайна. Я хочу установить разные цвета для каждой полосы, но не могу добиться этого с помощью опции цвета.
Вот мой код:
const categories = stats.map(([domain]) => domain);
const series = stats.map(([, value]) => value);
this.chartOptions = {
chart: {
type: 'bar',
height: 100,
sparkline: {enabled: true}
},
colors: ['#0abd0a', '#4CB140', '#7CC674', '#A9D1A8',
'#009596', '#00B2B2', '#00C8C8', '#00E0E0', '#00F0F0', '#00FFFF'],
fill: {
colors: ['#0abd0a', '#4CB140', '#7CC674', '#A9D1A8',
'#009596', '#00B2B2', '#00C8C8', '#00E0E0', '#00F0F0', '#00FFFF'],
opacity: 1,
},
plotOptions: {bar: {horizontal: true}},
series: [{name: 'Links', data: series}],
xaxis: {categories: categories},
tooltip: {fixed: {enabled: true}, y: {formatter: function(val) {return val}}, theme: 'dark'},
};
Есть ли обходной путь для установки нескольких цветов для столбцов на горизонтальной гистограмме с помощью ApexCharts в режиме спарклайна?
Дополнительные детали:
Я пробовал использовать параметр цвета в конфигурации диаграммы, но, похоже, он не работает для спарклайнов. Я использую ApexCharts версии 1.6 в Vue 2. Я искал в Интернете решения, но не нашел ничего, что работало бы специально для режима спарклайнов. Любая помощь будет оценена по достоинству!
Идеальное решение, сработало как часы!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Похоже, что значение цвета по умолчанию применяется ко всем диаграммам, поэтому цвета в цветовом массиве не имеют никакого эффекта. Чтобы решить эту проблему, необходимо установить параметр распределенный как true. Установка параметра распределенного как true делает столбцы дискретными. Каждое значение соответствует одному столбцу в серии, поэтому каждый столбец принимает значение цвета из заданного вами цветового массива. Поэтому добавление distributed: true в объект plotOptions.bar решает проблему:
const categories = stats.map(([domain]) => domain);
const series = stats.map(([, value]) => value);
this.chartOptions = {
chart: {
type: 'bar',
height: 100,
sparkline: {enabled: true}
},
colors: ['#0abd0a', '#4CB140', '#7CC674', '#A9D1A8',
'#009596', '#00B2B2', '#00C8C8', '#00E0E0', '#00F0F0', '#00FFFF'],
fill: {
colors: ['#0abd0a', '#4CB140', '#7CC674', '#A9D1A8',
'#009596', '#00B2B2', '#00C8C8', '#00E0E0', '#00F0F0', '#00FFFF'],
opacity: 1,
},
plotOptions: {
bar: {
horizontal: true,
// Added here
distributed: true
}
},
series: [{name: 'Links', data: series}],
xaxis: {categories: categories},
tooltip: {fixed: {enabled: true}, y: {formatter: function(val) {return val}}, theme: 'dark'},
};
Я также создал ДЕМО-ССЫЛКУ, чтобы легко просмотреть и протестировать ее.
Надеюсь, понятно и полезно
Не могли бы вы попробовать добавить
distributed: trueв объектthis.charOptions.plotOptions.bar?