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