text - jqPlot-在x轴上具有角度的多行刻度

Question

我有一个关于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都不
被解释为我所需要的。这是我发现的最佳方法。

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

任何建议对我都会非常有帮助。
提前致谢。最好的祝福

Answer 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