2014-07-11 5 views
2

Highcharts를 사용하여 프로젝트의 일부 차트를 렌더링하고 있습니다. 내 문제는 배열을 plotOptions.column에 설정하려고하면 작동하지 않는다는 것입니다. 그러나, 그것은 plotOptions.pie을 위해 잘 작동합니다.하이 차트 plotOptions.column.colors가 작동하지 않습니다.

내가해야 할 일은 다양한 시리즈 유형에 대해 서로 다른 색상 사전 설정을 설정하는 것입니다. 따라서 동일한 유형의 시리즈를 추가 할 때 배열의 색상은 colors 배열에서 가져옵니다. 그러나 지금, 어떤 별난 이유로 각 계열 유형에 대해 내 colors 배열을 정의했지만 기본 색상이 표시됩니다. 여기

더 무슨 뜻인지 이해하는 바이올린입니다 : http://jsfiddle.net/c5nhd/1/

을 그리고 여기에 공식 문서에 대한 링크입니다 : 열 차트의 다른 시리즈에서 다른 색상의 http://api.highcharts.com/highcharts#plotOptions.column.colors

답변

0

DEMO 우리의 커스터마이즈 된 색상 배열은 하이 차트의 기본 색상을 오버라이드합니다.

코드 :

var colors = ['#FF530D', '#E82C0C', '#FF0000', '#E80C7A', '#E80C7A']; 
$('#container').highcharts({ 
    plotOptions: { 
     pie: { //working here 
      colors: colors 
     } 
    }, 
    colors:colors, 
    series: [{ 
     type: 'column', 
     data: [25, 34, 15, 17, 19], 
    },{ 
     type: 'column', 
     data: [25, 34, 15, 17, 19], 
    },{ 
     type: 'column', 
     data: [25, 34, 15, 17, 19], 
    }, { 
     type: 'pie', 
     data: [25, 34, 15, 17, 19], 
     center: ['75%', '30%'] 
    }] 
}); 
+0

그게 내가 원하는 것이 아니기 때문에 그렇게하는 유일한 방법인지 궁금합니다. 이것은 시리즈 레벨에서 색상을 설정하지만 시리즈 유형 레벨에서 색상을 설정해야합니다. 여기서 한 일은'plotOptions.column'에서'colorByPoint'를'true'로 설정하여 얻을 수 있습니다. 'plotOptions.column.colors'가 공식 문서에 나와 있지만, 왜 작동하지 않는지 모르겠다. – templatify

+0

'시리즈 레벨에서 색상을 설정해야합니까?'라는 말은 무엇을 의미합니까? 색상을 어떻게 표시 하시겠습니까? 이것을 원하십니까 : http://jsfiddle.net/phpdeveloperrahul/RQBLc/? –

+0

내가 말하고자하는 것은'column' 타입을위한 두 개 이상의 시리즈를 추가 할 때, 각 시리즈는'colors' 배열에서 선택한 자체 색상을 가져야한다는 것입니다. – templatify

0

트릭은 시리즈색상 아니라 글로벌 옵션 색상이나 포인트 색상을 설정하는 것입니다.

전역 옵션 색상은 페이지의 모든 차트에 적용되는 세트입니다. 다른 차트에 적용해도 괜찮습니다.

또한 colorByPointfalse이어야합니다. 기본값 인 false이므로 제외 할 수 있습니다.

는 또한 전설을 포함 할 경우 반드시 색상하지 컬러 (들)을 설정 할 수 있습니다. 범례는 여러 색상을 설정하고 기본값으로 사용할 경우 사용할 색상을 알 수 없습니다.

$('#container').highcharts({ 
    plotOptions: { 
     column: { 
     //colorByPoint: false, 
     //stacking: 'percent', 
     }, 
     pie: { 
      colors: ['#FF530D', '#E82C0C', '#FF0000', '#E80C7A', '#E80C7A'] 
     } 
    }, 
    series: [{ 
     type: 'column', 
     color: '#FF530D', 
     data: [25, 34, 15, 17, 19] 
    }, { 
     type: 'pie', 
     data: [25, 34, 15, 17, 19], 
     center: ['75%', '30%'] 
    }, { 
     type: 'column', 
     color: '#333333', 
     data: [15, 27, 10, 23, 21] 
    }] 
}); 

다음은 js 바이올린에 대한 업데이트입니다. http://jsfiddle.net/c5nhd/4/

이것은 백분율로 쌓아 올리려면 작동합니다.

관련 문제