2013-01-15 12 views
3

아래는 jqplot 막대 그림을 기반으로 한 스크립트의 일부입니다. 내가 겹치기 때문에 x 축 틱 lables 회전하려고하지만 TickRender 플러그인을 가져 왔습니다. 그러나 아래의 스크립트에 다음 코드를 추가하면 그래프가 전혀 인쇄되지 않습니다.이 jqplot 스크립트에서 x 축 레이블을 어떻게 회전시킬 수 있습니까?

내가 어떻게 올바르게 할 수 있는지 알 수 있습니까?

tickRenderer: $.jqplot.CanvasAxisTickRenderer , 
    tickOptions: { 
    angle: -30, 
    fontSize: '10pt' 
    } 

스크립트

$(document).ready(function(){ 
     $.jqplot.config.enablePlugins = true; 
     var s1 = [2314,2053,94,70,2541,2626,2551,2515,2147,116,82,2536,2560,2558,2465,2127,103,73,2546,2554,2583,2527,2235,104,88,2515,2604,2641,2532,2142]; 
     var ticks = ['01/11/2012','02/11/2012','03/11/2012','04/11/2012','05/11/2012','06/11/2012','07/11/2012','08/11/2012','09/11/2012','10/11/2012','11/11/2012','12/11/2012','13/11/2012','14/11/2012','15/11/2012','16/11/2012','17/11/2012','18/11/2012','19/11/2012','20/11/2012','21/11/2012','22/11/2012','23/11/2012','24/11/2012','25/11/2012','26/11/2012','27/11/2012','28/11/2012','29/11/2012','30/11/2012']; 

     plot1 = $.jqplot('chart1', [s1], { 
      // Only animate if we're not using excanvas (not in IE 7 or IE 8).. 
      animate: !$.jqplot.use_excanvas, 
      seriesDefaults:{ 
       renderer:$.jqplot.BarRenderer, 
       pointLabels: { show: true } 

      tickRenderer: $.jqplot.CanvasAxisTickRenderer , 
       tickOptions: { 
       angle: -30, 
       fontSize: '10pt' 
       } 

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



      }, 
      highlighter: { show: false } 
     }); 

     $('#chart1').bind('jqplotDataClick', 
      function (ev, seriesIndex, pointIndex, data) { 
       $('#info1').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data); 
      } 
     ); 
    }); 

답변

4

이 시도 // jqplot,

axesDefaults: { 
      tickRenderer: $.jqplot.CanvasAxisTickRenderer , 
      tickOptions: { 
       angle: -90, 
       fontSize: '10pt' 
      } 
     }, 
     axes: { 
      xaxis: { 
       renderer: $.jqplot.CategoryAxisRenderer, 
       ticks: ticks 
      }, 
    } 

또는

axes: { 
     xaxis: { 
       renderer:$.jqplot.DateAxisRenderer, 
       ticks: ticks, 
       tickRenderer: $.jqplot.CanvasAxisTickRenderer , 
       tickOptions: { 
          angle: -90, 
          fontSize: '10pt' 
          } 
       } 
     } 

또는

+0

덕분에 아래의 파일을 포함하지만 나는 몇 가지를 통과하고있는 좋은 찾고 그래픽을위한 자바 스크립트를 사용 자습서는 문제가 무엇인지 알아 내면 전화를 업데이트합니다. –

0

http://www.jqplot.com/examples/rotated-tick-labels.php에서 내가 일반적으로 파이썬에서 쓰기 다른 뭔가 잘못하고해야 응답을

<script class="include" type="text/javascript" src="js/jquery.jqplot.chartCode.js"></script> 

    <script type="text/javascript" src="js/plugins/jqplot.dateAxisRenderer.js"></script> 
    <script type="text/javascript" src="js/plugins/jqplot.canvasTextRenderer.js"></script> 
    <script type="text/javascript" src="js/plugins/jqplot.canvasAxisTickRenderer.js"></script> 
    <script type="text/javascript" src="js/plugins/jqplot.categoryAxisRenderer.js"></script> 
    <script class="include" type="text/javascript" src="js/plugins/jqplot.pointLabels.js"></script> 
    <script class="include" type="text/javascript" src="js/plugins/jqplot.barRenderer.js"></script> 
    <script class="include" type="text/javascript" src="js/plugins/jqplot.pieRenderer.js"></script> 
관련 문제