플로트 비교 막대 차트

하나의 데이터 세트에 대해 서로 인접한 막대가 여러 개있는 차트를 Flot에서 제작하려고합니다. 두 번째 데이터 세트는 두 번째 데이터 세트로 표시되지만 기본 차트 아래에는 표시되지만 꺼집니다. 각도로. 아래 그림은 쉽게이 일을 어떤 방법이 있나요 내가플로트 비교 막대 차트

How I want it to look

후있어 보여줍니다? 나는 막대기를 서로 옆에 놓을 수있는 플러그인이 있다는 것을 알고 있지만 실제로는 내가 뭘하는지 알지 못합니다.

나는 이미 원하는대로 하나의 데이터 세트를 렌더링했지만 두 번째 데이터 세트를 수행하는 방법을 모릅니다.

출처

2013-02-12 PaReeOhNos

하나의 옵션은 바 스태킹 플러그인을 취할 수 있습니다 필요에 맞게 수정하십시오. 나는 이것을 직접하는 flot을위한 플러그인이 있다는 것을 믿지 않는다. – Ryley

그래, 나는 그것을 통해 모습을 보았지만 꽤 혼란 스러웠다. 나는 그것이 실제로 막대를 움직이는 방법을 볼 수 없었다. 그것은 단순히 오프셋을 추가했지만 그것이 어디 있는지를 알 수는 없었다. 그것은 또한 바를 가로 질러 움직이는 것이 좋을 것이지만 나는 그들을 움직이는 것에 대해 어떻게 갈 것인지 확신 할 수 없다. – PaReeOhNos

스태킹을 수행하려면 div과 몇 가지 CSS를 사용할 수 있습니다. 다만 각 div에 하나의 그래프를 넣고 절대적으로 래퍼 DIV 내에서의 위치 :

<div id="graph_wrap"> 
    Comparison Chart 
    <div id="graph1"></div> 
    <div id="graph2"></div> 
</div>

CSS :

#graph_wrap { 
    width: 700px; 
    height: 400px; 
} 

#graph1, #graph2 { 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    width: 600px; 
    height: 300px; 
    margin: 50px; 
    z-index: 2; 
} 

#graph2 { 
    top: -15px; 
    left: 15px; 
    z-index: 1; 
}

예 : http://jsfiddle.net/jtbowden/q4N4M/

출처

2013-02-12 21:49:23

나는 이것에 대해 생각하고 있었다. 지금까지 가장 쉽고 빠른 솔루션처럼 보입니다. 조금 해키지만 주어진 시간 제약을 주어서 나는 이것을 줄 것이다 :) – PaReeOhNos

나는 RE를 티켓에 묶어두고 차트 포지션을 바꾸지 않는 몇 가지 방법을 가지고있다. 그러나이 솔루션은 효과가있다. – PaReeOhNos

플로트 비교 막대 차트

답변

관련 문제