jqPlot - x 轴上带有角度的多线刻度

发布于 2024-10-21 19:34:32 字数 742 浏览 1 评论 0原文

我有一个关于 x 轴刻度的问题。我使用 jqPlot 0.9.7

我的刻度线是多行的，如下所示： a ; b c 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'
        }

}

刻度显示在一条旋转的长线上。既不是也不是 \n 正在根据我的需要进行解释。这是我发现的最好的方法。

有什么解决办法吗？我怎样才能写旋转文本刻度？

任何建议都会对我非常有帮助。提前致谢。此致

原文

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

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.

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

With this config:

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

}

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

匿名的好友 2024-10-28 19:34:32

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

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

(The above files comes with the jqPlot package).

Then add the following to the plot options list

axesDefaults: {
    tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
},

Then your

    tickOptions: {
        angle: -30,
    }

will be effective.

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

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

回复收藏 0 原文

梦初启 2024-10-28 19:34:32

不要忘记添加：

<script type="text/javascript" src="../src/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="../src/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>

Don't forget to add :

<script type="text/javascript" src="../src/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="../src/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>

回复收藏 0 原文

~没有更多了~