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

会有效。

e.g。

....
    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

Answer 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>

jqPlot - x轴角度的多线刻度

2 个答案: