$(function () {
var chart;
$(document).ready(function () {
// Build the chart
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific website, 2010'
},
legend: {
backgroundColor: '#FCFFC5',
borderColor: '#C98657',
borderWidth: 1,
width: 200,
itemWidth: 200,
itemDistance: 200,
itemStyle: {
color: 'red',
width: 200,
'word-break': 'break-all'
}
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['FirefoxFirefoxFirefoxFirefoxFirefoxFirefoxFirefoxFirefoxFirefoxFirefoxFirefoxFirefoxFirefoxFirefoxFirefox', 45.0],
['IEIEIEIEIEIEIEIEIEIEIEIEIEIEIEIEIEIEIEIEIEIEIEIEIEIEIEIEIEIEIEIEIEIEIEIE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['SafariSafariSafariSafariSafariSafariSafariSafariSafariSafariSafariSafariSafariSafariSafariSafariSafariSafariSafariSafariSafariSafariSafari', 8.5],
['OperaOperaOperaOperaOperaOperaOperaOperaOperaOperaOperaOperaOperaOperaOperaOperaOperaOperaOperaOperaOperaOperaOperaOperaOpera', 6.2],
['OthersOthersOthersOthersOthersOthersOthersOthersOthersOthersOthersOthersOthersOthersOthersOthersOthersOthersOthersOthersOthersOthersOthersOthersOthersOthers', 0.7]
]
}]
});
});
});
饼状图的图例文字太长了,在手机APP上显示不全,有没有一个属性能设置图例的宽度,超过宽度就自动换行的。。
3 个解决方案
#1
legend: {
图例容器的宽度 width: 400,
每个图例项的宽度 itemWidth: 70,
}
不知道行不行
或者试试
layout: rtical 垂直排列在用maxHeight:设置最大高度
#2
useHTML 和 labelFormatter 结合看
#3
截取了一下字符串。。
#1
legend: {
图例容器的宽度 width: 400,
每个图例项的宽度 itemWidth: 70,
}
不知道行不行
或者试试
layout: rtical 垂直排列在用maxHeight:设置最大高度
#2
useHTML 和 labelFormatter 结合看
#3
截取了一下字符串。。