파이 차트의 범례를 HighCharts의 데이터 레이블로 사용하는 방법
Nov 13 2020
High 차트의 원형 차트를 다루는 동안 몇 가지 질문이 있습니다.
- 원과 별도로 범례의 모양을 변경하는 방법.
- 백분율 값 전에 데이터 레이블에 범례를 표시하고 싶습니다.
- 또한 데이터가 증가함에 따라 데이터 레이블이 원형 차트에 급진적이지 않습니다. 이 문제를 해결하는 방법.
내 차트 옵션 :
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
accessibility: {
point: {
valueSuffix: '%'
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '{point.percentage:.1f} %'
},
showInLegend: true
},
},
series: [{
name: 'Brands',
colorByPoint: true,
dataLabels: {
connectorWidth : 0
},
showLegends: true,
data: [{
name: 'Chrome',
y: 61.41,
}, {
name: 'Internet Explorer',
y: 11.84
}, {
name: 'Firefox',
y: 10.85
}]
}]
});
내 코드 펜
내 질문에 대한 답변을 받으면 감사하겠습니다.
답변
SebastianWędzel Nov 13 2020 at 17:55
- API를 사용하면
symbolRadius
또는 같은 옵션을 설정하여 범례 기호를 사용자 지정할 수 있습니다symbolHeight
.
데모: https://jsfiddle.net/BlackLabel/1m98xgvr/
API : https://api.highcharts.com/highcharts/legend.symbolHeight
범례 기호를 사용자 정의 png로 변경하려면 다음 솔루션을 사용하십시오.
사용자 정의 Highcharts 범례 기호
dataLabels.useHTML
플래그를 true로 설정하고dataLabes.formatter
콜백을 사용하여 뛰어난 HTML 요소가 될 출력을 사용자 정의 할 수 있습니다.
데모: https://jsfiddle.net/BlackLabel/2sog3znq/
- 여기서 무엇을 염두에두고 있는지 잘 모르겠습니다. 더 정확하게 설명해 주시겠습니까?