피벗 리얼차트(RealChart)

RealPivot과 RealChart를 사용하여 연계한 예제입니다. Pivot화면의 body영역 클릭 시 제조사 및 모델에 대한 판매 실적을 RealChart그래프로 보이도록 하였습니다.

RealGrid와 RealChart를 연계

RealChart는 https://www.realchart.co.kr/ (opens in a new tab) 페이지에서 확인하실 수 있습니다.

pivot 데이터, 라벨값 가져오기

포커스 이동 시 onCurrentChanged (opens in a new tab) 이벤트가 발생하며 getAllValues (opens in a new tab), getRowValues (opens in a new tab) 로 값을 가져올 수 있습니다.

사용 목적에 맞게 가져온 데이터를 원하는 형태로 가공해서 사용할 수 있습니다.

pivot.onCurrentChanged = function (grid, index) {
 
    var attrs = Object.keys(index.columns);
    var level = attrs.filter(function (item) { return item == "__sum" || item == "valueField" ? false : true; }).length;
 
    var columnLabels = pivot.getColumnLabels();
    var columnList = getLevelLabels(columnLabels, 1, level)
 
    var vals = []
    var len = Object.keys(pivot.getRowValues("판매량", index.rows).descendants).length;
    for (var i = 0; i < len; i++){
        if(Object.keys(pivot.getRowValues("판매량", index.rows).descendants)[i].split(":::").length == level){
            var key = Object.keys(pivot.getRowValues("판매량", index.rows).descendants)[i];
            vals.push(pivot.getRowValues("판매량", index.rows).descendants[key])
        }
    }
 
    setRealChart(dataProvider, vals, index, columnList);
}
 
function getLevelLabels(columnChilds, level, targetLevel) {
    var list = [];
    for (var i = 0, len = columnChilds.length; i < len; i++) {
        if(level == targetLevel){
            list.push(columnChilds[i].label)
        } else if(level < targetLevel && columnChilds[i].hasOwnProperty("childs")) {
            var levelLabels = getLevelLabels(columnChilds[i].childs, level + 1, targetLevel)
            list.push.apply(list, levelLabels);
        }
    }
    return list;
}

차트 생성 함수

function setRealChart(dataProvider, vals, index, columnList){
  var subtitle;
 
  if (Object.keys(index.rows)[0] == "__sum") {
      subtitle = "전체 요약";
  } else if (index.rows.모델) {
      subtitle = index.rows.모델;
  } else {
      subtitle = index.rows.제조사;
  }
 
  if (!rChart) {
      rChart = RealChart.createChart(document, "realchart", {
          title: { text: "차량 판매 실적" },
          subtitle: { text: subtitle },
          yAxis: [
              { title: { text: "단위(대)" }, label: { numberSymbols: "" } },
          ],
          series: [{ colorByPoint: true, name: "판매량", data: vals }],
      });
  } else {
      rChart.getSeries("판매량").updateData(vals);
      rChart.subtitle.updateOption("text", subtitle, true);
      rChart.xAxis.updateOption("categories", columnList, true);
  }
}

피벗 영역 피벗 데이터 디테일