2013-08-05 5 views
1

멀티 컬러 영역이있는 하이 차트에 꺾은 선형 차트를 만들려고합니다. 내가 렌더링하려고하는 일부 시간 지정 데이터가 각 결과에 대한 상태를 가지고 있습니다. 상태가 특정 색상 인 경우 선 그래프 아래 영역의 색상을 변경하고 싶습니다.멀티 컬러 영역이있는 하이 차트 챠트 차트

과 같이 :

enter image description here

가 여기 내 일부 데이터의 샘플입니다 : x 축은는

{"GmtDateTime": "2013-07-31 12:20:15", "Speed": 40.068, "StatusCode": "1"}, 
{"GmtDateTime": "2013-07-31 12:30:11", "Speed": 41.823, "StatusCode": "2"}, 
{"GmtDateTime": "2013-07-31 12:40:15", "Speed": 41.987, "StatusCode": "1"}, 
{"GmtDateTime": "2013-07-31 12:50:11", "Speed": 40.192, "StatusCode": "3"}, 
{"GmtDateTime": "2013-07-31 13:00:12", "Speed": 40.877, "StatusCode": "3"}, 
{"GmtDateTime": "2013-07-31 13:10:12", "Speed": 40.364, "StatusCode": "2"}, 
{"GmtDateTime": "2013-07-31 13:20:15", "Speed": 44.331, "StatusCode": "1"}, 
{"GmtDateTime": "2013-07-31 13:30:14", "Speed": 42.89, "StatusCode": "1"}, 

"GMTDatetime는"y 축은 "속도"입니다, 범위 색상은 "StatusCode"입니다. 사전에

감사합니다!

+0

행복 해당 지역의 div 이름을 ... –

+0

어떤 다른 정보와 같은 정보/코드를 더 제공? 표시 할 코드가 없습니다. 그 이미지는 방금 페인트로 만들었습니다. –

답변

2

하이 차트는 날짜가 아닌 타임 스탬프 (밀리 초 단위의 시간)를 사용합니다. 시리즈/데이터 객체에는 '속도'가 아닌 x/y 매개 변수가 있어야합니다. 결과적으로 json은 다음과 같이 나타납니다.

{y: Date.UTC(2012,12,2), y: 42.89, "StatusCode": "1"} 

Date.UTC는 밀리 초 단위로 반환 시간을 허용합니다.

부품 차트의 색상이 다른 경우 세리를 추가로 사용해야합니다.

편집 :

예 : http://jsfiddle.net/D4sbc/

+0

그래, 그 형식으로 데이터를 구문 분석 해요. 도움이 필요한 데이터가 아니라 차트의 스타일을 지정하는 것입니다. –

+0

내 업데이트 된 게시물보기. –

관련 문제