如果我们在饼图中有很长的 dataLabel 并且我们将样式宽度设置为 100px(为了没有迷你饼图)一些 dataLabel 就会消失,例如查看值 Others1。
如何解决?
http://jsfiddle.net/htwh3rdh/4/
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific website, 2014'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b style="width: 100px; display: block;">{point.name}</b>: {point.percentage:.1f} %',
style: {
width: '100px',
},
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 40],
['Safari veryveryveryvery long label', 8.5],
['Opera veryveryveryvery long label', 6.2],
['Others veryveryveryvery long label', 0.7],
['Safari1 veryveryveryvery long label', 2.5],
['Opera1 veryveryveryvery long label', 3.2],
['Others1 veryveryveryvery long label', 0.6]
]
}]
});
});
最佳答案
在这些情况下(根据我的经验)(长名称和小图形)最好使用带有此类图例的饼图。这样您就不会在显示名称时遇到问题。
$(function () {
$(document).ready(function () {
// Build the chart
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific website, 2014'
},
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: [
['Firefox iuyguiygiuygiuygiuy uygiuygiuyg', 45.0],
['IE', 26.8],
{
name: 'Chrome uygiuygiuyg ',
y: 12.8,
sliced: true,
selected: true
},
['Safariiuyg iuygiuyg', 8.5],
['Opera uiy giu y giuy', 6.2],
['Others iuygiuygiuyg', 0.7]
]
}]
});
});
});
关于javascript - Highchart 长数据标签和样式宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30209494/