Flot은 간격 막대 그래프를 지원합니까?

Question

Flot은 가로 막 대형 차트를 뜨는 옵션을 제공합니까? interval bar plot (PyChart)에 해당하는 Flot을 찾고 있습니다. 다음 그림은 링크에서 가져온 것입니다

(나는 그것이 FLOT의 각 줄은 하나 개의 변수를 가지고처럼 보이기 때문에 FLOT가이 기능을 지원하지 않을 수 있음을 알고,하지만 확실하지 않다).

편집 : 모든 자바 스크립트 라이브러리 제안도 환영합니다!

Answer 1

Flot의 막대 차트와 Flot의 stacking을 사용하여 문제를 해결했습니다. 기본적으로 빈 공간을 위해 흰색을 사용하여 스택을 만듭니다 (가장자리를 제외하고 어떻게 든 투명하게 변환됩니다). 불행히도 Flot의 스태킹은 같은 레벨의 모든 스택이 같은 유형/색상이어야합니다. 이것을 무시하기 위해 바 중 일부는 잘못된 색상의 스택에서 폭이 제로입니다. 결과는 놀라 울 정도로 좋아 보인다!

가 대응하는 코드는 다음 (그것이 너무 클 것이기 때문에 예시적인 데이터는 상기 이미지에 대응하지 않는다. 이것은 "색"의 두 나타낸다).

var series = [ 
    { 
     data: [ 
      [24.0, 0],    
      [6.93333333333, 1], 
      [6.95, 2], 
      [6.91666666667, 3], 
      [6.95, 4],    
     ], 
     color: "#FFFFFF", 
    }, 
    { 
     data: [ 
      [0.0, 0], 
      [0.0666666666667, 1], 
      [0.05, 2], 
      [0.0833333333333, 3], 
      [0.05, 4],    
     ], 
     color: "#FFFF00", 
    }, 
]; 
date_ticks_pre = [[0, "Okt 19, 2014"], [1, "Okt 20, 2014"], [2, "Okt 21, 2014"], [3, "Okt 22, 2014"], [4, "Okt 23, 2014"]]; 
var options = { 
    series: { 
    bars: { 
     show: true, 
     barWidth: .75, 
     horizontal: true, 
     align: "center" 
    }, 
    stack: true, 
    }, 
    xaxis: { 
    ticks: 24, 
    }, 
    yaxis: { 
    ticks: date_ticks_pre, 
    }, 
    zoom: { interactive: true }, 
    pan: { interactive: true }, 
}; 
$.plot('#flot_plot', 
     series, 
     options);