플롯 차트 스태킹 대신 xaxis 값이 겹칩니다.

Question

각 데이터가 현재 재고 또는 예상 재고를 나타내는 각 sku의 막대로 표시되도록하려고합니다.

현재 막대는 스택 상태로 표시되지만 투영 된 현재와 현재 상태가 동일하므로 겹치기 때문에 바르게 표시되지 않습니다.

stack을 false로 변경하면 여전히 스택 상태로 유지됩니다.

또한 툴팁이 막대에 나타나지 않습니다.

여기에 잘못 구성된 것은 무엇입니까?

내 바이올린 : http://jsfiddle.net/eComEvo/4jjvkvsv/1/

Answer 1

1) 두 개의 동일한 바이 적층 된 경우,이 중복되지 않는

스태킹. 겹침은 막대 값 중 하나가 음수이고 다른 하나가 양수인 경우에만 발생합니다.

stack 옵션은 series 옵션 객체에 속하는 :

series: { 
     bars: { 
      show: true, 
      align: 'center', 
      barWidth: 0.6 
     }, 
     stack: true 
    }, 

당신이 차이를 볼 여기 true 및 false을하려고하면.

오버랩을 원하지 않는 경우에는 사이드 바 (side-by-side-bar)가 두 개 있습니다 (이 경우 두 개의 plugins이 있습니다).

2) 당신은 tooltip 옵션 만 이해 및/또는이를 사용없이 툴팁 플러그인을

도구 설명. 그러나 플러그인을 사용하지 않고 자신의 툴팁을 간단하게 만들 수 있습니다. 업데이트 된 fiddle보기 :

$("<div id='tooltip'></div>").css({ 
    position: "absolute", 
    display: "none", 
    border: "1px solid #fdd", 
    padding: "2px", 
    "background-color": "#fee", 
    opacity: 0.80 
}).appendTo("body"); 

$("#stock-projections-bar-chart").bind("plothover", function (event, pos, item) { 
    if (item) { 
     var x = item.datapoint[0].toFixed(2), 
      y = item.datapoint[1].toFixed(2); 
     $("#tooltip").html(item.series.label + " of " + x + " = " + y) 
      .css({ 
      top: item.pageY + 5, 
      left: item.pageX + 5 
     }).fadeIn(200); 
    } else { 
     $("#tooltip").hide(); 
    } 
});