Chart control에 Highcharts API 를 적용하는 방법

OnBeforeDrawingChart 이벤트 API 추가

Start Release No : 7.0.400.20230209 / Update Release No :

프로젝트명 : (BCRM#D2852) i-AUD 차트 데이터 레이블 수식 적용

작성자 : 이승철 / 검수자 :

기능 정보			API Open			UI Open			Read Only			Not Use			Hidden			Not Recommend

기능 설명

OnBeforeDrawingChart 이벤트를 신규 추가하였습니다.

Chart(기본차트, Pie, Polygon, Scatter 차트 포함)를 Drawing 할 때, 발생하는 이벤트
파라미터

sender : 이벤트 발생 객체 정보

sender.viewerId : Chart를 포함하고 있는 Viewer 의 ID
sender.self : Chart 객체

args : 전달 파라미터

args.Id : 차트의 Name
args.Option : 차트에서 drawing에 사용될 Highcharts option 객체

Example code

var OnBeforeDrawingChart = function(sender, args) {
	// Pie차트
	if(args.Id === 'V1__CHT_LGSRFULXCCN7D4JA') {
		//console.log(args);
		var option = args.Option;
		// 첫번째 계열의 데이터라벨 포맷을 변경한다.
		option.series[0].dataLabels.formatter = function() {
			//console.log(this);
			var value = parseInt(this.y);
			var percent = this.percentage.toFixed(2);
			var color = this.color;
			return '<span data-z-index="1" style="position: absolute; font-size: 11px; white-space: nowrap; color: rgb(0, 0, 0); font-weight: bold; margin-left: 0px; margin-top: 0px; left: 5px; top: 5px;"><div style="border-width: 2px; border-style: solid; border-color: ' + color + '; border-radius: 3px; padding: 2px; background-color: rgb(255, 255, 255); opacity: 0.8; color: rgb(0, 0, 0); font-size: 9px; font-style: normal; font-weight: normal;"><span style="color: rgb(0, 0, 0);">'
				+ value + '</br>' + percent + '</span></div></span>';
		}

		// 차트의 툴팁 포맷을 변경한다.
		option.tooltip.formatter = function() {
			//console.log(this);
			var value = parseInt(this.y);
			var percent = this.percentage.toFixed(2);
			var color = this.color;
			return '<span data-z-index="1" style="position: absolute; font-size: 12px; white-space: nowrap; color: rgb(51, 51, 51); margin-left: 0px; margin-top: 0px; left: 8px; top: 8px; background-color: rgba(255, 255, 255, 0.7); border: 2px solid ' + color + '; border-radius: 3px; padding: 5px;"><span style="font-size: 10px">'
				+ this.key + '</span><br><span style="color:' + color + '">●</span> VALUE: ' + value + '</br>PERCENT: ' + percent + '%</span>';
		}
		
	}
}

제약 사항

※ 해당 이벤트는 당사가 가지고 있는 Highchars 제품의 라이선스에 위배되는 방향으로 사용할 수 있는 가능성이 존재하므로, 적극적으로 사용하는 것을 권장하지 않습니다. 따라서 API 문서에는 노출하지 않습니다.

변경 전/후 제품 버전

변경 전(제품 버전)

변경 전

변경 후

공간 바로가기

페이지 트리