리얼차트 연동
그리드 데이터셀 영역에 리얼차트를 활용한 리얼차트 연동 데모입니다.
※ 차트는 export시 출력되지 않습니다.
리얼차트 include
리얼차트 사용을 위한 "realchart.min.js" 파일 include
<script type="text/javascript" src="/public/realchart.0.9.6/realchart.0.9.6.min.js"></script>차트 커스텀렌더러 설정
"chart" 컬럼에 커스텀렌더러 설정하기
var columns = [
{
name: "realchart",
header: {
text: "차트(리얼차트)",
},
renderer: {
type: "renderer01",
},
editable: false,
width: 428,
},
...
];
gridView.registerCustomRenderer("renderer01", {
initContent: function (parent) {
var div = (this._div = document.createElement("div"));
div.className = "custom_render_div";
parent.appendChild(div);
config = {
title: {
visible:false
},
series: [
{
type: "pie",
pointLabel: {
visible: true,
position: "outside",
text: "${name}",
},
data: [
{ name: "GDP", y: 10 },
{ name: "GNI", y: 20 },
{ name: "PGNI", y: 20 },
{ name: "DIncome", y: 20 },
],
},
],
};
this._gridChart = RealChart.createChart(document, div, config);
},
clearContent: function (parent) {
this._gridChart = null;
},
render: function (grid, model, width, height, info) {
var data = grid.getValues(model.index.itemIndex);
var d = [];
d[0] = [data.GDPName, data.GDP, "#7cb5ec"];
d[1] = [data.GNIName, data.GNI, "#434348"];
d[2] = [data.PGNIName, data.PGNI, "#90ed7d"];
d[3] = [data.DIncomeName, data.DIncome, "#f7a35c"];
config.series[0].data = d.map(([name, value, color]) => ({
name,
y: value,
color: color,
}));
this._gridChart.load(config);
},
});