Как вы меняете цвет каждой категории в столбчатой ​​диаграмме?

Question

У меня есть столбчатая диаграмма, в которой есть несколько категорий, каждая из которых имеет одну точку данных (например, , как эта ). Можно ли изменить цвет бара для каждой категории? то есть каждый столбец будет иметь свой уникальный цвет, а не синий?

Answer 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

Пример для jsfiddle

Answer 2

Также вы можете установить опцию:

  {plotOptions: {column: {colorByPoint: true}}}

для получения дополнительной информации читайте документы

Answer 3

Добавьте, какие цвета вы хотите colors, а затем установите colorByPoint на true.

colors: [
'#4572A7', 
'#AA4643', 
'#89A54E', 
'#80699B', 
'#3D96AE', 
'#DB843D', 
'#92A8CD', 
'#A47D7C', 
'#B5CA92'
],

plotOptions: {
    column: {
        colorByPoint: true
    }
}

демо

Ссылка:

• http://api.highcharts.com/highstock#colors
• http://api.highcharts.com/highcharts#plotOptions.column.colorByPoint

Answer 4

Да, вот пример в jsfiddle: http://jsfiddle.net/bfQeJ/

Highcharts.setOptions({
    colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
});

Примером является круговая диаграмма, но вы можете просто заполнить серию всеми цветами, которые вам нравятся =)

Answer 5

Вы можете добавить массив цветов в верхний график для изменения цвета графика.Вы можете изменить эти цвета, а также указать свои собственные цвета.

$('#container').highcharts({
colors: ['#2f7ed8','#910000','#8bbc21','#1aadce'],
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},

Answer 6

Как упомянуто antonversal, чтение цветов и использование опции цвета при создании объекта диаграммы работают.

var chart3 = new Highcharts.Chart({colors: ['#458006', '#B0D18C']});

Answer 7

Просто добавьте это ... или вы можете изменить цвета в соответствии с вашими требованиями.

Highcharts.setOptions({
        colors: ['#811010', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
        plotOptions: {
            column: {
                colorByPoint: true
            }
        }

    });

Answer 8

Это сработало для меня.Утомительно устанавливать все параметры цвета для серии, особенно если она динамическая

plotOptions: {
  column: {
   colorByPoint: true
  }
}

Answer 9

просто поставь график

$('#container').highcharts({
colors: ['#31BFA2'], // change color here
chart: {
        type: 'column'
}, .... Continue chart

Answer 10

добавить свойства:

 colors: ['Red', 'Bule', 'Yellow']