하이차트 연동

그리드 데이터셀 영역에 하이차트를 활용한 하이차트 연동 데모입니다.

※ 차트는 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();     
    }
  });

}