logo标签列表

jqPlot - 在x轴上使用带角度的多行刻度

textrotationjqplot
6
我有一个关于x轴刻度线的问题。我使用的是jqPlot 0.9.7版本。
我的刻度线是多行的，像这样：a <br> b <br> c <br> d。我使用renderer: $.jqplot.CategoryAxisRenderer，效果很好，所以刻度线可以显示为多行且< br/>也能正常工作。
现在我需要将它们旋转30度。我尝试了'angle: -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都没有按照我所需的进行解释。这是我找到的最佳方法。
有什么解决方案吗？如何编写旋转文本刻度线？
对此有任何建议对我都非常有帮助。 提前感谢。最好的问候。
2个回答
16

为了正确使用的语法，您需要包括以下脚本和默认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

我在我的脚本中有这个，但它什么也没做 :( 是的，我确实有这些脚本。 - AntonioCS
3
不要忘记添加:
<script type="text/javascript" src="../src/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="../src/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接