2011-03-15 112 views
6

我對x軸上的刻度線有個疑問。我使用jqPlot 0.9.7jqPlot - 在x軸上有多個角度的刻度線

我的蜱蟲是多行的,像這樣:a <br> b <br> c <br> d。 我使用renderer: $.jqplot.CategoryAxisRenderer,它運作良好,所以 蜱顯示在多行和
作品。

現在我需要將它們旋轉30º。我試過'角度:-30',但它不是 的工作。

採用這種配置:

xaxis: { 
     renderer: $.jqplot.CategoryAxisRenderer, 
     tickRenderer: $.jqplot.CanvasAxisTickRenderer , 
     ticks: ['a <br> b <br> c <br> d' , 'p <br> q <br> r <br> s'], 
     tickOptions:{ 
       angle: -30, 
       fontSize: '9px' 
     } 

} 

蜱在一個單一的,旋轉時,長虛線表示。 <br>\n 都不被解釋爲我需要。這是我找到的最好的方法。

有沒有解決方案?我怎樣才能寫出旋轉的文字滴答聲?

任何建議對我都很有幫助。 在此先感謝。此致敬禮

回答

16

爲了正確的語法工作,您需要包括以下腳本以及默認jqPlots腳本。

  • jqplot.canvasTextRenderer.min.js
  • jqplot.dateAxisRenderer.min.js
  • jqplot.canvasAxisTickRenderer.min.js

(以上文件附帶jqPlot封裝)。

然後添加以下的情節選項列表

axesDefaults: { 
    tickRenderer: $.jqplot.CanvasAxisTickRenderer , 
}, 

然後你

tickOptions: { 
     angle: -30, 
    } 

將是有效的。

例如從jqPlot

.... 
    series: [{renderer: $.jqplot.BarRenderer}], 
    axesDefaults: { 
     tickRenderer: $.jqplot.CanvasAxisTickRenderer , 
     tickOptions: { 
      angle: -90, 
      fontSize: '10pt' 
     } 
    }, 
    axes: { 
     xaxis: { 
      renderer: $.jqplot.CategoryAxisRenderer, 
      ticks: ticks 
     }, 
     yaxis: {  
      tickOptions: { 
       angle: 0, 
       fontSize: '10pt' 
      } 
     } 
    }, 
.... 

例子可以在這裏找到: http://www.jqplot.com/tests/rotated-tick-labels.php

+0

我在劇本有這一點,但這個沒有做任何事情:(是的我確實有腳本 – AntonioCS 2012-03-14 17:37:49

3

不要忘了補充:

<script type="text/javascript" src="../src/plugins/jqplot.canvasTextRenderer.min.js"></script> 
<script type="text/javascript" src="../src/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>