您的位置:首页 > 其它

highCharts tootip 内容太长,自动换行.

2015-10-23 15:54 1131 查看
原理:通过tooltip 的pointformatter 方法:做2个操作:

1 取消父级span的 white-space,这个属性导致span不能换行

2 添加换行的div重组内容

//执行效果图



/*************************************highChart官网修改后台的代码********************************************/

$(function () {

    $('#container').highcharts({

        chart: {

            plotBackgroundColor: null,

            plotBorderWidth: null,

            plotShadow: false

        },

        title: {

            text: 'Browser market shares at a specific website, 2010'

        },

        tooltip: {

            useHTML:true,

            pointFormat: '{series.name}: {point.percentage:.1f}%',

            formatter : function(){

             $("div.highcharts-tooltip span").css("white-space", "inherit");//允许换行

                //重新生成
               var percentage = !this.point.percentage ? this.point.percentage : this.point.percentage.toFixed(1);   
               var content = '<div style="font-size: 10px;width: 200px;display:block;word-break: break-all;word-wrap: break-word;">' + this.key + '<br/>' +
               
'<span style="font-size:10px">'+ this.series.name+': <b>'+percentage+'%</b></span></div>';
               return content;

            }

        },

        plotOptions: {

            pie: {

                allowPointSelect: true,

                cursor: 'pointer',

                dataLabels: {

                    enabled: true,

                    color: '#000000',

                    connectorColor: '#000000',

                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'

                }

            }

        },

        series: [{

            type: 'pie',

           // name: 'Browser share',

            data: [

                ['我是一直丑小鸭,咿呀咿呀哟,我是一直丑小鸭,咿呀咿呀哟我是一直丑小鸭,咿呀咿呀哟,咿呀咿呀哟我是一直丑小鸭,咿呀咿呀哟咿呀咿呀哟,咿呀咿呀哟我是一直丑小鸭,咿呀咿呀哟',   45.0],

                ['IE',       26.8],

                {

                    name: 'Chrome',

                    y: 12.8,

                    sliced: true,

                    selected: true

                },

                ['Safari',    8.5],

                ['Opera',     6.2],

                ['Others',   0.7]

            ]

        }]

    });

});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: