구글차트 연동
그리드 데이터셀 영역에 구글차트를 활용한 구글차트 연동 데모입니다.
※ 차트는 export시 출력되지 않습니다.
차트패키지 로드
구글차트 사용을 위한 "loader.js" 파일 include 및 차트패키지 로드
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(function() {
createGrid("realgrid");
});
차트 커스텀렌더러 설정
"chart" 컬럼에 커스텀렌더러 설정하기
var columns = [
{
name:"chart",
header: {
text: "차트(구글차트)"
},
renderer: {
type: "renderer01"
},
editable: false,
width: 428
}
...
];
gridView.registerCustomRenderer("renderer01", {
initContent : function (parent) {
this.chart = new google.visualization.PieChart(parent);
},
clearContent : function(parent) {
this.chart.clearChart();
this.chart = null;
},
// 셀이 그려질때 호출되는 method이다.
// 동적으로 그려져야 하는 경우 이곳에서 처리한다.
render : function(grid, model, width, height, info) {
var data = grid.getValues(model.index.itemIndex);
var d = [];
d[0] = ["이름", "비율"];
d[1] = [data.GDPName, data.GDP];
d[2] = [data.GNIName, data.GNI];
d[3] = [data.PGNIName, data.PGNI];
d[4] = [data.DIncomeName, data.DIncome];
// 여기서 구글 차트에 맞는 Data 형식의 기초를 작성함.
var chartData = google.visualization.arrayToDataTable(d);
// API : https://developers.google.com/chart/interactive/docs/gallery/piechart
var options = {
sliceVisibilityThreshold: .1,
height: height,
chartArea:{height:height-10},
fontSize: 10,
tooltip: {trigger:"selection"}
};
this.chart.draw(chartData, options);
},
// Cell을 클릭했을때 호출되는 method
// clickData를 return하면 grid.onCellItemClicked의 인자로 전달된다.
click : function(event) {
var grid = this.grid.handler; //
var index = this.index.toProxy(); //
if ( event.target === this._button1 || event.target === this._button2 || event.target === this._href) {
event.preventDefault();
return {
cellType:"data",
target : event.target,
index: index,
value: this._value
}
}
}
});