플로트 스택 막대

Question

그래서 위의 flot은 flot을 사용하여 스택 된 막대를 가지고 있습니다. 지금 나는 또한 메인 바 안에있는 모든 막대 위에있을 때 그 부분의 번호를 보여주는 호버 효과 (hover effect)를 가지고 있습니다. 내가 보여주고 싶은 것은 숫자 대신에 현재 막대에 대한 참조에서 끝난 부분에 대한 백분율입니다. 그러나 막대의 합계에 도달 할 수있는 방법이 어디에도 표시되지 않습니다 (즉, 주위의 숫자를 찾으십시오. 4200이 막대를 기준으로 함).

Answer 1

총계를 얻으려면 데이터를보고 클릭 된 항목에 해당하는 시리즈의 요소를 찾아 값을 합산해야합니다.

 <div id="placeholder" style="width:600px;height:300px;"></div> 
    <div id="clickdata" ></div> 


<script id="source"> 
$(function() { 
    var d1 = []; 
    for (var i = 0; i <= 10; i += 1) 
     d1.push([i, parseInt(Math.random() * 30)]); 

    var d2 = []; 
    for (var i = 0; i <= 10; i += 1) 
     d2.push([i, parseInt(Math.random() * 30)]); 

    var d3 = []; 
    for (var i = 0; i <= 10; i += 1) 
     d3.push([i, parseInt(Math.random() * 30)]); 

    var stack = 0, bars = true, lines = false, steps = false; 

    function plotWithOptions() { 
     return $.plot($("#placeholder"), [ d1, d2, d3 ], { 
      grid: { clickable: true }, 
      series: { 
       stack: stack, 
       lines: { show: lines, fill: true, steps: steps }, 
       bars: { show: bars, barWidth: 0.6, hoverable: true, clickable: true } 
      } 
     }); 

    } 

    var plot = plotWithOptions(); 

    function getTotalForIndex(index) { 
     var total = parseFloat(d1[index][1]) + parseFloat(d2[index][1]) + parseFloat(d3[index][1]); 
     return total; 
    } 

    $("#placeholder").bind("plotclick", function (event, pos, item) { 
     if (item) { 
      $("#clickdata").text("You clicked point " + item.dataIndex + " in " + item.series.label + ". which has total value "+ getTotalForIndex(item.dataIndex)); 
      plot.highlight(item.series, item.datapoint); 
     } 
    }); 
}); 
</script>