明凯博客

关注网站技术,一个特立独行的程序员

Highcharts横坐标文字实现竖放的方法

Highcharts这个插件用来画图很好,可是默认的横坐标是横放的。

如果横坐标组数很多,那么显示就会很拥挤很难看,于是我想到了将横坐标竖放。

看了官网API,发现写得很笼统,不是很明白,后来自己试了试。

看看下面的两段代码,现在懂了没有?

1
2
3
4
5
6
7
8
9
xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            labels: {
                style: {
                    color: 'red',
                    fontStyle : 'italic'//这个是控制斜放的
                }
            }
        },
1
2
3
4
5
6
7
8
9
xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            labels: {
                style: {
                    color: 'red',
                    rotation : 90  //这个是控制竖放的
                }
            }
        },

看效果图:

sf

, ,

相关文章

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注