하이차트 연동
그리드 데이터셀 영역에 하이차트를 활용한 하이차트 연동 데모입니다.
※ 차트는 export시 출력되지 않습니다.
하이차트 include
하이차트 사용을 위한 "highcharts.min.js" 파일 include
<script type="text/javascript" src="/public/js/highcharts.min.js"></script>
차트 커스텀렌더러 설정
"chart" 컬럼에 커스텀렌더러 설정하기
var columns = [
{
name:"chart",
header: {
text: "차트(하이차트)"
},
renderer: {
type: "renderer01"
},
editable: false,
width: 400
}
...
];
gridView.registerCustomRenderer("renderer01", {
initContent : function (parent) {
this._chart = new Highcharts.chart(parent, {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie',
height: 200,
width: 400
},
title: {
text: '',
style:{
fontSize:12,
},
margin:0
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true
},
},
},
series: [{
colorByPoint: true,
data: [{name:"A", y:10},{name:"B", y:20},{name:"B", y:20},{name:"B", y:20}]
}]})
},
clearContent : function(parent) {
this._chart.destroy();
this._chart = null;
},
render : function(grid, model, width, height, info) {
var data = grid.getValues(model.index.itemIndex);
var d = [];
d[0] = [data.GDPName, data.GDP];
d[1] = [data.GNIName, data.GNI];
d[2] = [data.PGNIName, data.PGNI];
d[3] = [data.DIncomeName, data.DIncome];
this._chart.series[0].updateData(d);
this._chart.redraw();
}
});
}