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

}

刻度线显示在一条旋转的长线上。既没有<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 回答