如何在此jqplot腳本中旋轉x軸標籤

下面是基於jqplot條形圖示例的腳本的一部分。我正在嘗試旋轉x軸標記，因爲它們重疊我已經導入了TickRender插件，但是當我將下面的代碼添加到下面的腳本時，圖表根本無法打印。如何在此jqplot腳本中旋轉x軸標籤

你能告訴我如何正確地做到這一點。

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

// jqplot腳本

$(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); 
      } 
     ); 
    });

來源

2013-01-15 George Thompson

試試這個，

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' 
          } 
       } 
     }

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

來源

2013-01-16 02:38:53 Nandu

感謝您的答覆，我必須做別的事情錯了，我常在Python寫的，但我一個使用JavaScript的好看的圖形，我通過一些去當我找出問題所在時，教程會更新電話。 –

從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>

來源

2015-12-28 08:57:05

如何在此jqplot腳本中旋轉x軸標籤

回答

相關問題