리얼차트 그리드 셀 연동
RealGrid와 RealChart를 사용하여 연계한 예제입니다.
그리드 데이터셀 내부에 리얼차트를 표현해서 렌더러와 같이 사용할 수 있습니다.
Loading RealGrid...
RealGrid와 RealChart를 연계
RealChart는 https://support.realgrid.com/ (opens in a new tab) 에서 다운 받을수 있습니다.
커스텀 렌더러 차트 생성
gridView.registerCustomRenderer('renderer01', {
initContent: function (parent) {
const div = (this._div = document.createElement('div'));
div.className = 'custom_render_div';
div.style.width = '140px';
div.style.height = '100px';
parent.appendChild(div);
gaugeConfig = {
chart: {
},
credits: {
visible: false, // 크레딧 숨김처리
},
title: '',
gauge: {
name: 'gauge1',
value: 87,
clockwise: true,
startAngle: 0,
sweepAngle: 360,
valueRadius: '100%',
innerRadius: '70%',
centerX:25,
centerY:15,
rim: {
visible: true
},
valueRim: {
visible: true,
thickness: '100%',
ranges: [{
toValue: 30,
color: '#0098ff'
},
{
toValue: 70,
color: '#66d0ff'
},
{
color: '#ff5c35'
}
]
},
scale: {
visible: false,
position: 'default'
},
label: {
style: {
fontSize:13
},
suffix: "%"
}
}
};
this._rChart = RealChart.createChart(document, div, gaugeConfig);
},
clearContent: function (parent) {
this._rChart = null;
},
render: function (grid, model, width, height, info) {
const data = grid.getValues(model.index.itemIndex);
if(!grid.isEditing()) {
gaugeConfig.gauge.value = data.achievementRate
this._rChart.load(gaugeConfig);
}
}
});