3
我正在绘制一个半甜甜圈饼图（使用innersize和start-/endAngle）。但是我的数据标签不在绘图区域（中心点下方/ xAxis）之外，或者根本没有显示我的设置。Highcharts中的DataLabels在容器之外/不显示
$(function() {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: '',
enabled: false
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage}%</b>',
percentageDecimals: 1
},
plotOptions: {
pie: {
startAngle: -90,
endAngle: 90,
center: ['50%', '100%'],
size: '140%',
cursor: 'pointer',
dataLabels: {
enabled: true,
//crop: false,
//overflow: 'none',
//useHTML: true,
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
},
style: {
width: '100px' // for line wrap on long dataLabels
}
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox and this is very very very long name with some spaces etc.', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
});
});
在这里看到：jsfiddle
使用useHTML：true, useHTML: true根本没有任何积极的工作。
使用useHTML: true会渲染图中的溢出dataLabels，但我的long dataLabels消失。
那么我该如何做到这一点有以下几点想法？
- 我的半圆环应该总是在我的绘图区域的底部，使用 空间（不能太小）。
- 恰巧我有很长的数据标签，所以定义了一个style.width，如果需要的话，似乎可以做一个换行。
- DataLabels应该始终高于xAxis，并且不会低于我的半甜甜圈的底部。
- DataLabels应始终显示并使用连接器在图表之外。
在此先感谢和问候。