当前位置:  开发笔记 > 编程语言 > 正文

设置Highcharts x轴标签的宽度

如何解决《设置Highchartsx轴标签的宽度》经验,为你挑选了1个好方法。

我需要为xAxis Label设置最大宽度,以便当它太长而其余字母(字符)将转到下一行.

我在设置标签步骤中读取了Highcharts x轴标签文本包装丢失,并且找到设置"width"对于英语单词(由空格分隔)正常工作.

但是当没有空地时,说"VeryLongLongLongWord"或"这是一个很长很长很的中文",那是行不通的.

我也尝试过设置wordWrap: break-word,仍然没用.

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column',
        },
        xAxis: {
            categories: ['This is a long Text', 'VeryLongLongLongWord', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec','?????????????'],
        labels: {
                style:{
                    width:'30px',// not work for text without empty space
                    wordWrap: 'break-word'//no use
                },
                step: 1
            }
        },

        plotOptions: {
            series: {
                pointWidth: 30
            }
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
    });
});

fidder:http://jsfiddle.net/uehbmzgx/



1> Jaskey..:

@ Sebastian的解决方案很好.

我找到了另一种解决方案,使用formatter来限制它的宽度:

        labels: {
            useHTML:true,//Set to true
            style:{
                width:'50px',
                whiteSpace:'normal'//set to normal
            },
            step: 1,
            formatter: function () {//use formatter to break word.
                return '
' + this.value + '
'; } },

http://jsfiddle.net/uehbmzgx/5/

推荐阅读
殉情放开那只小兔子
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有