6

X 軸の目盛りについて質問があります。私はjqPlot 0.9.7で作業しています

私の目盛りは、次のように複数行です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'
        }

}

ティックは、1 本の回転した長い線で表示されます。どちら<br>も\n 私が必要として解釈されていません。これは私が見つけた最良のアプローチです。

これに対する解決策はありますか？回転したテキストの目盛りを書くにはどうすればよいですか?

どんな提案も私にとって非常に役に立ちます。前もって感謝します。よろしくお願いします

4

2 に答える 2

16

正しい構文を機能させるには、デフォルトの jqPlots スクリプトとともに次のスクリプトを含める必要があります。

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

(上記のファイルは jqPlot パッケージに付属しています)。

次に、以下をプロット オプション リストに追加します。

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

次に、あなたの

    tickOptions: {
        angle: -30,
    }

が有効になります。

例えば

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

jqPlot の例はここにあります: http://www.jqplot.com/tests/rotated-tick-labels.php

于 2011-06-01T11:46:23.163 に答える
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>
于 2011-11-10T16:27:24.667 に答える