jqPlot - 在 x 轴上带有角度的多线刻度答案

【问题标题】：jqPlot - multiline ticks with angle in x-axisjqPlot - 在 x 轴上带有角度的多线刻度
【发布时间】：2011-03-15 15:41:28
【问题描述】：

我有一个关于 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 都不是正在被解释为我需要的。这是我找到的最好的方法。

有什么解决办法吗？我怎么能写出旋转的文本刻度？

任何建议都会对我很有帮助。提前致谢。最好的问候

【问题讨论】：

标签： text rotation jqplot

【解决方案1】：

为了使正确的语法正常工作，您需要包含以下脚本以及默认的 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

【讨论】：

我的脚本中有这个，但这没有做任何事情 :( 是的，我确实有脚本

【解决方案2】：

别忘了加：

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

【讨论】：