3
저는 반 도넛 형 파이 차트 (innersize 및 start-/endAngle 사용)를 그립니다. 그러나 내 데이터 레이블은 플롯 영역 (중심점/xAxis 아래) 외부에 있거나 내 설정과 관련하여 전혀 표시되지 않습니다.Highcharts의 데이터 라벨이 컨테이너 외부에 있음/표시되지 않음
$(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가 길어서 style.width를 정의하는 것이 필요한 경우 줄 바꿈을하는 것처럼 보입니다.
- 데이터 레이블은 항상 xAxis보다 커서 내 반 도넛 아래쪽에 위치하지 않아야합니다.
- 데이터 레이블은 항상 커넥터를 사용하여 차트 외부에 표시되어야합니다.
미리 감사드립니다.