하이 차트 레이블 그룹화

Question

다이어그램과 같은 타임 라인에 상태를 표시해야하는 다이어그램을 만들고 있습니다.

다음

series: [{ 
    data: [?], 
    name: 'state1' 
}, { 
    data: [?], 
    name: 'state2' 
}, { 
    data: [?], 
    name: 'state3' 
}, { 
    data: [?], 
    name: 'state1' 
}, { 
    .... 
}, { 
    data: [?], 
    name: 'state1' 
}] 

이 I'v 가지고있는 작업은 다음과 같습니다 : 나는 그것을 위해 가장 적합한 수평 막대 다이어그램이 될 것이라고 생각,이 같은 데이터 추가 차트 내가 필요한 것 같습니다

을하지만 예를 들어이 경우 3 개의 범례가 있어야합니다 (예 : state1, state2, state3).

어떻게하면 좋을까요? @StAlex의 답변을 근거로

는

Answer 1

열 범위 계열을 사용하는 다른 접근 방식을 제안합니다.

이렇게하면 각 시간 슬롯에 대한 시리즈가 아닌 각 시간 슬롯에 대한 데이터 포인트가있는 3 개의 시리즈만으로이 작업을 수행 할 수 있습니다. 이는 범례를 조작하거나 다른 시리즈 수준의 가짜 조치를 취하지 않아도됩니다.

이

내가 (두 상태로)하는 방법을 보여줍니다 이전 질문에 대한 않았던 example입니다 :

• http://jsfiddle.net/jlbriggs/o9ck2zLn/0/

쉽게뿐만 아니라 날짜 축을 사용하여 적용 할 수 있습니다, 그것은 당신이 가고있는 것 같아요.

Answer 2

var legends = {}; 
series.forEach(function(bar){ 
    legends[bar.name] = bar.data; 
}); 

Answer 3

, 나는 비슷한 솔루션을 권장하지만, ECMAScript를 5 특정 forEach없는 것 :

var legend = {}; 
for (var i = 0; i < series.length; i++) { 
    var bar = series[i]; 
    if (!legend[bar.name]) { 
     legend[bar.name] = 0; 
    } 
    legend[bar.name] += bar.data; 
} 

나는 data이 숫자 것으로 가정. 그렇지 않은 경우 댓글을 추가하십시오.