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應始終顯示並使用連接器在圖表之外。
在此先感謝和問候。