[]
dataLabels 속성을 통해 차트의 각 데이터 포인트 옆에 레이블을 표시할 수 있습니다.
dataLabels 객체에 다음 속성을 설정하여 이를 사용하실 수 있습니다:
FlexChart 예시:
import * as wjChart from '@grapecity/wijmo.chart';
var myChart = new wjChart.FlexChart('#myChart');
myChart.dataLabel.content = '{value:n0}';
myChart.dataLabel.position = 'Top'; // Top, Left, Right, Center, Bottom, None
myChart.dataLabel.connectingLine = true;
myChart.dataLabel.border = true;
myChart.dataLabel.offset = 10;
레이블 콘텐츠가 문자열인 경우 다음 플레이스홀더(Placeholders)를 포함할 수 있습니다:
매개변수는 중괄호로 묶어야 합니다(예: 'x=, y='). 또한 바인딩된 필드 이름은 '' 와 ''와 같이 포함될 수 있습니다.
예시:
// Create a chart and show y data in labels positioned above the data point.
var myChart = new wjChart.FlexChart('#myChart');
myChart.initialize({
itemsSource: data,
bindingX: 'country',
series: [
{ name: 'Sales', binding: 'sales' },
{ name: 'Expenses', binding: 'expenses' },
{ name: 'Downloads', binding: 'downloads' }],
});
myChart.dataLabel.position = 'Top';
myChart.dataLabel.content = '{country} {seriesName}:{y}';
혼합 포맷팅을 포함할 수 있는, 보다 복잡한 데이터 레이블 레이아웃의 경우, 콘텐츠 내에서 추가 tspan 요소를 사용하십시오. 다음 예시는 일부 텍스트와 값의 변경된 색상을 굵게 적용합니다.
myChart.dataLabel.content =
'<tspan font-weight="bold">{country}</tspan>' +
'<tspan fill="red">:{value:n0}</tspan>';
콘텐츠는 HitTestInfo 객체를 매개변수로 사용하는 함수로 지정할 수도 있습니다. 다음 예제에서는 함수를 사용하여 데이터 레이블 콘텐츠의 설정 방법을 보여 줍니다.
// Set the data label content
myChart.dataLabel.content = function (ht) {
return ht.name + ":" + ht.value.toFixed();
}
데이터 레이블은 FlexPie에서 FlexChart과 FlexRadar와 동일하게 작동하지만, 가능한 위치는 방사형 원형 차트 뿐 입니다.
FlexPie 데이터 레이블 위치:
FlexPie 데이터 레이블 예시 :
var myChart = new wjChart.FlexPie('#myChart');
myChart.dataLabel.content = '{value:n0}';
myChart.dataLabel.position = 'Outside';
myChart.dataLabel.connectingLine = true;
myChart.dataLabel.border = true;
myChart.dataLabel.offset = 10;
데이터 레이블 콘텐츠는 렌더링 이벤트 내에서 사용자 정의할 수도 있습니다. 데이터 레이블 렌더링 이벤트 args cancel 속성을 사용하여 특정 데이터 포인트의 렌더링을 취소할 수 있으며 text 속성을 사용하여 데이터 레이블 콘텐츠를 조건부로 설정할 수 있습니다.
예시:
// custom render labels only for the "downloads" series
myChart.dataLabel.rendering = function(s, e) {
if (downloadsOnly && e.hitTestInfo.series.binding != 'downloads') {
e.cancel = true;
}
e.text = 'nanana';
}