highCharts tootip 内容太长,自动换行.
来源:互联网 发布:淘宝banner图片素材 编辑:程序博客网 时间:2024/04/30 12:27
原理:通过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]
]
}]
});
});
0 0
- highCharts tootip 内容太长,自动换行.
- 链接太长自动换行
- 单词太长,不能自动换行
- WinForm中遇到Label要显示的内容太长,自动换行
- table td 内容太长自动换行的实例(word-wrap和word-break的差异)
- echart--axisLabel中值太长不自动换行
- table td 内容太长自动隐藏
- 网页内容自动换行
- 超出内容自动换行
- 网页内容自动换行
- td内容自动换行
- DIV内容自动换行
- div内容自动换行
- 页面数据展示的太长,怎么让他自动换行
- Jquery mobile 写html时文字太长无法自动换行。
- div 长度固定 文字太长实现自动换行
- Jquery.Datatables td宽度太长的情况下,自动换行
- html表格内容自动换行,强制换行
- 引用
- 如何在程序中调用Caffe做图像分类
- 一个可以查询工程未使用的图片资源脚本!
- JavaScript之 ------ 数组相关知识(轻松玩转js数组)
- Hibernate批量插入数据
- highCharts tootip 内容太长,自动换行.
- 如何利用均衡器改善音质
- 在 ServiceModel 客户端配置部分中,找不到引用协定“ServiceReference1.IPathIdentifyService”的默认终结点元素
- Maven 安装和配置
- 半天教会你玩git
- 8.2.2 Optimizing DML Statements 优化DML 语句:
- Struts2中的Token令牌使用
- iOS:hidesBottomBarWhenPushed的正确用法
- Linux下的mysql安装