У меня есть диаграмма столбцов, которая имеет несколько категорий, каждая с одной точкой данных (например, как этот). Можно ли изменить цвет панели для каждой категории? т.е. у каждого бара будет свой собственный уникальный цвет, а не синий?
Как вы меняете цвет каждой категории в диаграмме столбцов с большими диаграммами?
Ответ 1
Вы также можете установить цвет по отдельности для каждой точки/панели, если вы измените массив данных как объекты конфигурации вместо чисел.
data: [
{y: 34.4, color: 'red'}, // this point is red
21.8, // default blue
{y: 20.1, color: '#aaff99'}, // this will be greenish
20] // default blue
Ответ 2
Также вы можете установить опцию:
{plotOptions: {column: {colorByPoint: true}}}
для получения дополнительной информации прочитайте docs
Ответ 3
Добавьте цвета, которые хотите colors
, а затем установите colorByPoint
на true
.
colors: [
'#4572A7',
'#AA4643',
'#89A54E',
'#80699B',
'#3D96AE',
'#DB843D',
'#92A8CD',
'#A47D7C',
'#B5CA92'
],
plotOptions: {
column: {
colorByPoint: true
}
}
Ссылка:
Ответ 4
Да, вот пример в jsfiddle: http://jsfiddle.net/bfQeJ/
Highcharts.setOptions({
colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
});
Примером является круговая диаграмма, но вы можете просто заполнить серию всеми цветами в вашем сердечном содержимом =)
Ответ 5
Вы можете добавить массив цветов в диаграмму с высоким графиком для изменения цвета графика. Вы можете переустановить эти цвета, и вы также можете указать свои собственные цвета.
$('#container').highcharts({
colors: ['#2f7ed8','#910000','#8bbc21','#1aadce'],
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
Ответ 6
Как упоминается antonversal, чтение цветов и использование параметра цвета при создании объекта диаграммы работает.
var chart3 = new Highcharts.Chart({colors: ['#458006', '#B0D18C']});
Ответ 7
Просто добавьте это... или вы можете изменить цвета в соответствии с вашим требованием.
Highcharts.setOptions({
colors: ['#811010', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
plotOptions: {
column: {
colorByPoint: true
}
}
});
Ответ 8
добавить свойства:
colors: ['Red', 'Bule', 'Yellow']
Ответ 9
просто поместите диаграмму
$('#container').highcharts({
colors: ['#31BFA2'], // change color here
chart: {
type: 'column'
}, .... Continue chart
Ответ 10
Это сработало для меня. Его утомительно установить все параметры цвета для серии, особенно если она динамическая
plotOptions: {
column: {
colorByPoint: true
}
}
Ответ 11
{plotOptions: {bar: {colorByPoint: true}}}