2012-10-11 2 views
6

jQuery를 플롯 수평 누적 막대 그래프, 이런 식으로 뭔가 :표시 값 - 나는 (가로 및 스택)를 FLOT 막대 차트의 막대 내에서 값을 보여 드리고자합니다

|------------------------------------------- 
|     5     | 1 | 
|------------------------------------------- 
| 
|------------------------------------ 
|   3   |  2  | 
|------------------------------------ 

나는 이것을보고 게시물 : Show value within bar on flot bar chart 값은 첫 번째 누적 막대 내부에만 나타납니다. 두 번째 값은 현재 막대의 해당 값이 아니라 현재 총계입니다. 예 :

|------------------------------------------- 
|     5 6    |  | 
|------------------------------------------- 
| 
|------------------------------------ 
|   3 5  |   | 
|------------------------------------ 

누군가이 기능에 대한 좋은 플러그인을 알고 있습니까? 또한 바 내부의 글꼴 크기를 늘리고 싶습니다.

감사합니다. 여기에 코드


:

<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.js"></script> 
<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.pie.js"></script> 
<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.stack.js"></script> 
<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.barnumbers.js"></script> 

var data = [ 
     {label: 'Label 1', color:"#80FF80", data: [[1,5], [2,3]]}, 
     {label: 'Label 2', color:"#FF8080", data: [[1,1], [2,2]]} 
]; 

//reverse data for horizontal 
for (series in data){ 
    var s = data[series]; 
    for (i=0;i<s.data.length;i++){ 
      var tmp = s.data[i][0]; 
     s.data[i][0] = s.data[i][1]; 
     s.data[i][1] = tmp;   
    } 
} 

var options = { 
    series: { 
     stack: 0, 
     lines: {show: false, steps: false }, 
     bars: { 
      show: true, 
      barWidth: 0.5, 
      align: 'center', 
      horizontal: true, 
      showNumbers: true 
     }, 
    }, 
    yaxis: {ticks: [[1,'Category 1'], [2,'Category 2']]}, 
}; 

$.plot($("#flot-example-2"), data, options); 
+0

코드를 게시 할 수 있습니까? http://codepen.io/pen/ –

+0

죄송합니다. 방금 코드를 추가했습니다. 감사합니다. –

+0

여기에서 데모를 볼 수 있습니다. http://codepen.io/anon/full/mrbdK –

답변

5

누적 막대를 지원하도록 플롯 기호를 업데이트했습니다. 업데이트 된 내용은 examples을 참조하십시오. 다른 기능이 필요하거나 이메일을 보내거나 문제를 열려면 우연히이 질문 만 보았습니다.

+0

감사합니다! :) –

+0

첫 번째 질문 : 숫자 형식을 어떻게 지정할 수 있습니까? 두 번째 질문 : 마우스를 올리면이 값을 어떻게 표시 할 수 있습니까? 감사. @dinosaurwaltz –

1

스택 막 대형 차트를 지원하지 않는 FLOT-barnumbers을 보인다. 이것이 가치가 부적절한 이유입니다. 누적 막 대형 차트를 구현하는 jQuery 플러그인 인 jqBarGraph를 사용하는 것이 좋습니다.

http://workshop.rs/jqbargraph/

나는 그것이 도움이되기를 바랍니다.

0

마침내 Highcharts Plugin을 사용하기로 결정했습니다. 문서화가 잘되어 잘 작동하기 때문에!