2012-10-11 4 views
0

JQPlot을 사용하여 법선 축과 로그 기반 축을 사용하여 다중 축 차트를 만들려고합니다. 차트는 4 개의 데이터 시리즈를 사용해야합니다. 내가 무엇을 시도하든, 나는 그것을 창조하는 것처럼 보이지 않는다. 축을 정렬하여 로그 눈금이 0에서 시작하도록합니다. 로그 눈금이 1-10-100-1000-10000 인 것처럼 구현할 수없는 것처럼 보입니다. 누군가 나를 도와 줄 수 있습니까? 감사. 내가 얻을 수있는일반 및 로그 눈금이있는 다중 축 차트

<html> 
<head> 
    <script type="text/javascript" src="jquery.min.js"></script> 
    <script type="text/javascript" src="jquery.jqplot.min.js"></script> 

    <link rel="stylesheet" href="jquery.jqplot.min.css" type="text/css" media="all" /> 
    <!--[if IE]><script language="javascript" type="text/javascript" src="./scripts/jqplot/excanvas.js"></script><![endif]--> 
    <script type="text/javascript" language="javascript"> 
     function goe() { 
      parts = ['mXVai', 'ltPo', ':', 'chrU', 'i', '[email protected]', 'jEqp', 'lNot.', 'cIUo', 'm'] 
      location.href=parts.join('').replace(/[A-Z]/g, ''); 
      return false; 
     } 

     SyntaxHighlighter.defaults['toolbar'] = false; 
    </script>  


    <title>JQPlot demo</title> 
    <script class="include" language="javascript" type="text/javascript" src="plugins/jqplot.barRenderer.min.js"></script> 
    <script class="include" language="javascript" type="text/javascript" src="plugins/jqplot.categoryAxisRenderer.min.js"></script> 
    <script class="include" language="javascript" type="text/javascript" src="plugins/jqplot.pointLabels.min.js"></script> 
    <script class="include" language="javascript" type="text/javascript" src="plugins/jqplot.logAxisRenderer.min.js"></script> 
    <script class="include" language="javascript" type="text/javascript" src="plugins/jqplot.canvasTextRenderer.min.js"></script> 
    <script class="include" language="javascript" type="text/javascript" src="plugins/jqplot.canvasAxisLabelRenderer.min.js"></script> 
    <script class="include" language="javascript" type="text/javascript" src="plugins/jqplot.canvasAxisTickRenderer.min.js"></script> 
    <script class="include" language="javascript" type="text/javascript" src="plugins/jqplot.dateAxisRenderer.min.js"></script> 
    <script class="include" language="javascript" type="text/javascript" src="plugins/jqplot.logAxisRenderer.js"></script> 
    <script class="include" language="javascript" type="text/javascript" src="plugins/jqplot.trendline.min.js"></script> 

    <script class="code" type="text/javascript"> 
     $(document).ready(function(){ 
      var v1 = [54551.94,15192.79,37937.26,11417.67,11799.59,18377.53,49207.82,168235.42,16654.29,62145.78]; 
      var v2 = [104235.30,8624.41,35598.76,12991.59,13237.07,1510.21,57692.54,93012.29,18102.28,74597.99]; 
      var v3 = [132.19,2.99,6.09,0.38,1.44,4.41,5.25,3.37,3.60,2.14]; 
      var v4 = [64.65,6.67,7.67,0,19,2.72,10.72,5.67,3.84,3.60,2.44]; 

      var ticks = ['A', 'B', 'C', 'D', 'E', 'F', 
         'G', 'H', 'I', 'J'] 

      var plot1 = $.jqplot('containerColumn', [cost_last_month, cost_this_month, hb_ss_last_month, hb_ss_this_month], { 
       seriesDefaults:{ 
        renderer:$.jqplot.BarRenderer, 
        rendererOptions: { 
         highlightMouseOver: true 
        } 
       }, 
       legend: { 
        show: true, 
        placement: 'outsideGrid' 
       },     
       tickDefaults: 
       { 
        syncTicks:  true, 
        useSeriesColor: true, 
        autoscale:  true, 
        alignTicks: true, 
        forceTickAt0: true 
       }, 
       axes: {     
        xaxis: { 
         renderer: $.jqplot.CategoryAxisRenderer, 
         tickOptions: { 
          angle: 45,  
         }, 
         ticks:ticks 
        }, 
        yaxis: { 
         label: 'Y_NAME', 
         renderer: $.jqplot.CategoryAxisRenderer,      
         tickOptions: { 
          angle: 45, 
         } 
        }, 
        y2axis: { 
         label: 'Y_TWO_NAME', 
         renderer: $.jqplot.CategoryAxisRenderer,  
        } 
       }, 
       series:[ 
        {yaxis:'yaxis', label:'v1'}, 
        {yaxis:'yaxis', label:'v2'}, 
        {yaxis:'y2axis', label:'v3'}, 
        {yaxis:'y2axis', label:'v4'} 
       ] 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <div id="containerColumn"></div> 
</body> 
+0

질문이 아직 유효하기 때문에이 댓글은 질문의 맨 위로 게시물을 가져올 것입니다. – Attiej

답변

4

이는 가까운 :

enter image description here

LogAxisRenderer가 0에서 시작하도록 강제로 min 옵션을 존중하고 싶어처럼 보이는에서하지만 그것은 (하지 않는 것 코드에서 지원하는 것으로 보입니다).

피들 here.

+0

답장을 보내 주셔서 감사합니다. 이것은 이미 큰 개선입니다. 두 가지 문제점이 남아 있습니다. 1. LogAxisRenderer를 최소값으로 유지할 수있는 방법이 없습니까? 0 또는 0.1에서 시작하는 것이 1000에서 시작하는 것보다 낫습니다. 2. 값이 모두 같은 간격의 흰색 간격을 갖지 않으므로 로그 축이 약간 이상하게 보입니다. 예를 들어 1000 ~ 5000 사이의 간격은 5000 ~ 10000보다 훨씬 큽니다. 표준 간격으로 흰색 간격을 지정하거나 5000, 50000 및 500000을 생략하고 싶습니다. – Attiej

+0

@Attiej : Problem (1) : That is 그들은 아직 해결되지 않은 것처럼 보입니다. 문제 (2) : 로그 축이 작동하는 방식입니다. 계산기를 가지고 y = 10^x로 놀면 x의 낮은 값 사이의 균등 한 변화가 높은 값의 x의 균등 변화보다 y의 더 낮은 변화를 생성한다는 것을 알 수 있습니다. – Roman