Highcharts 세로 막 대형 차트 내에서 각 범주의 색상을 어떻게 변경합니까?

Highcharts 세로 막 대형 차트 내에서 각 범주의 색상을 어떻게 변경합니까?

---

각각 하나의 데이터 포인트 (예 : 이와 같은 ) 가있는 여러 카테고리가있는 세로 막 대형 차트가 있습니다 . 카테고리별로 바의 색상을 변경할 수 있나요? 즉, 각 막대가 모두 파란색이 아닌 고유 한 색상을 갖게 될까요?

---

데이터 배열을 숫자 대신 구성 객체로 변경하는 경우 각 점 / 막대에 대해 개별적으로 색상을 설정할 수도 있습니다.

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의 예

---

또한 옵션을 설정할 수 있습니다.

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

자세한 내용은 문서를 읽으십시오.

---

원하는 색상을 추가 한 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

---

예, 다음은 jsfiddle의 예입니다. http://jsfiddle.net/bfQeJ/

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

예는 원형 차트이지만 마음의 내용에 맞는 모든 색상으로 시리즈를 채울 수 있습니다 =)

---

그래프의 색상을 변경하기 위해 상위 차트 그래프에 색상 배열을 추가 할 수 있습니다. 이러한 색상을 다시 정렬하고 고유 한 색상을 지정할 수도 있습니다.

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

---

antonversal에서 언급했듯이 차트 개체를 만들 때 색상을 읽고 색상 옵션을 사용하면 작동합니다.

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

---

이것을 추가하십시오 ... 또는 요구에 따라 색상을 변경할 수 있습니다.

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

    });

---

그냥 차트를 넣어

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

---

속성 추가 :

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

---

이것은 나를 위해 일했습니다. 시리즈의 모든 색상 옵션을 설정하는 것은 지루합니다. 특히 동적 일 경우

plotOptions: {
  column: {
   colorByPoint: true
  }
}

---

{plotOptions: {bar: {colorByPoint: true}}}

참고 URL : https://stackoverflow.com/questions/7414287/how-do-you-change-the-colour-of-each-category-within-a-highcharts-column-chart