jqPlot-在x轴上具有角度的多行刻度 [英] jqPlot - multiline ticks with angle in x-axis

问题描述

我有一个关于X轴刻度线的问题.我使用jqPlot 0.9.7

I have a question about ticks in x-axis. I work with jqPlot 0.9.7

我的刻度线是多行的，如下所示:a <br> b <br> c <br> d. 我使用renderer: $.jqplot.CategoryAxisRenderer并且效果很好，所以 刻度线以多行显示，
有效.

My ticks are multiline, like this: a <br> b <br> c <br> d. I use renderer: $.jqplot.CategoryAxisRenderer and it works well, so the ticks show in multiline and
works.

现在我需要将它们旋转30º.我尝试过角度:-30"，但没有 工作.

Now I need to rotate them 30º. I tried 'angle: -30' but it doesn't work.

使用此配置:

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都不 被解释为我所需要的.这是我发现的最佳方法.

The ticks are shown in one single, rotated, long line. Neither <br> nor \n are being interpreted as I need. This is the best approach I have found.

有什么解决办法吗?我该如何写旋转的文本刻度?

Is there any solution for this? How could I write rotated text ticks?

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

Any suggestion would be very helpful for me. Thanks in advance. Best regards

推荐答案

为使语法正确运行，您需要包括以下脚本以及默认的jqPlots脚本.

For the correct syntax to work you need to include the following scripts along with the defaults jqPlots scripts.

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

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

(以上文件与jqPlot软件包一起提供).

(The above files comes with the jqPlot package).

然后将以下内容添加到绘图选项列表中

Then add the following to the plot options list

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

Example from jqPlot can be found here: http://www.jqplot.com/tests/rotated-tick-labels.php

这篇关于jqPlot-在x轴上具有角度的多行刻度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！