2012-11-29 6 views
3

jqplot을 사용하는 동안 2 시리즈로 막대 차트를 작성해야하며 각 막대는 3 개의 다른 값 (카테고리)으로 구성됩니다. 문제는 첫 번째 값은 약 50000이고 다른 두 개는 약 (-3) - (3)입니다. 하나의 차트에 그리는 동안 표시되는 막대는 2 개뿐입니다. LogRenderer를 y 축으로 사용하려고 생각했지만 전혀 작동하지 않는 것 같습니다. 가장 좋은 옵션은 각 틱 그룹 (카테고리)에 대해 서로 다른 y 축을 설정하는 것이지만 검색 한 후에는이를 수행 할 방법을 찾지 못했습니다. (중요한 것은 2 시리즈 만 있어야합니다 - 날짜 비교이므로 시리즈에있는 것을 바꿀 수 없습니다)jqplot 및 barcharts의 막대 및 Y 축의 다른 크기 조정

누구든지 이것을 달성하는 방법을 알고 있습니까? 또는 한 차트에 모든 데이터를 표시하는 다른 방법이 있습니다 (주로 막대 차트 사용). 내 작업 예와

JS 바이올린 : http://jsfiddle.net/F5N4r/

헤더 :

<script type="text/javascript" src="https://bitbucket.org/armata007/jqplot/downloads/jquery.jqplot.min.js"></script> 
<script type="text/javascript" src="https://bitbucket.org/armata007/jqplot/downloads/jqplot.barRenderer.min.js"></script> 
<script type="text/javascript" src="https://bitbucket.org/armata007/jqplot/downloads/jqplot.canvasAxisTickRenderer.min.js"></script> 
<script type="text/javascript" src="https://bitbucket.org/armata007/jqplot/downloads/jqplot.categoryAxisRenderer.min.js"></script> 
<script type="text/javascript" src="https://bitbucket.org/armata007/jqplot/downloads/jqplot.enhancedLegendRenderer.min.js"></script> 
<script type="text/javascript" src="https://bitbucket.org/armata007/jqplot/downloads/jqplot.logAxisRenderer.min.js"></script> 
<div id="plot"></div>​ 

코드 :

var s1 = [50000, 0.11, 2.3]; 
var s2 = [55000, -0.20, 1.4]; 

var ticks = ['category 1', 'category 2', 'category 3']; 

var plot1 = $.jqplot('plot', [s1, s2], { 
    seriesDefaults: { 
     renderer: $.jqplot.BarRenderer, 
     rendererOptions: { 
      fillToZero: true 
     } 
    }, 
    series: [ 
     { 
     label: 'January 2012'}, 
    { 
     label: 'February 2012'} 
    ], 
    legend: { 
     show: true, 
     placement: "outside", 
     location: "s", 
     renderer: $.jqplot.EnhancedLegendRenderer, 
     rendererOptions: { 
      numberRows: 1 
     }, 
     marginTop: "34px" 
    }, 
    axes: { 

     xaxis: { 
      renderer: $.jqplot.CategoryAxisRenderer, 
      ticks: ticks 
     }, 


     yaxis: { 
      //renderer: $.jqplot.LogAxisRenderer, 
      pad: 1.05, 
      tickOptions: { 
       formatString: '%d' 
      } 
     } 
    } 
});​ 

결과 : http://www.roslaw.pl/pics/2012-11-29_18-56-55_835341x930andWndpnd.png

감사

답변

0

나는 이걸 가지고 놀았으니, 누군가가 시간을 절약 할 수 있기를 바랍니다.

(귀하의 경우에는 s1과 s2) 함수에 전달되는 각각에 대해 별도의 시리즈를 정의해야합니다. 사용자가 정의한 순서는 전달 된 순서와 일치합니다.

series: [ 
    { 
     label: 'January 2012', 
    }, 
    { 
     yaxis:'y2axis', 
     label: 'February 2012' 
    } 
], 

... 

axes: { 
    xaxis: { 
     }, 
     yaxis: { 
      label: "y axis 1" 
     }, 
     y2axis: { 
      label: 'y axis 2', 
     } 
}