바 렌더러

Bar 렌더러는 숫자형 컬럼 셀의 값을 막대 상자로 표시합니다. Bar 렌더러가 설정된 컬럼을 보면 막대 상자가 Gradient로 표시된 걸 확인할 수 있습니다.

렌더러의 속성

var columns = [
  ... 생략 ...
    {
      name: "Age",
      fieldName: "Age",
      width: "100",
      renderer: {
        type: "bar",
        origin: "left",  //막대 상자의 방향  left, right, top, bottom
        maximum: 100,    //최대값
        minimum: 0,      //최소값
        barWidth: "80%"  //막대 상자의 굵기
      },
      header: {
        text: 'origin: "left"'
      }
    },    
  ... 생략 ...
];

gridView.setColumns(columns);

렌더러의 스타일

바 렌더러의 막대 상자의 스타일은 realgrid-style.css 정의 되어 있습니다.

.rg-bar-renderer {
    /*position: absolute; 설정하면 ie에서 안됨. */
    position: relative;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
}

.rg-bar-renderer-bar {
    background: #2F8D27;
    background: -webkit-linear-gradient(right, #96f58F, #2F8D27);
    background: -moz-linear-gradient(right, #96f58F, #2F8D27);
    background: -ms-linear-gradient(right, #96f58F, #2F8D27);
    background: -o-linear-gradient(right, #96f58F, #2F8D27);
    background: linear-gradient(to left, #96f58F, #2F8D27);
}

.rg-bar-renderer-bar-right {
    background: #2F8D27;
    background: -webkit-linear-gradient(left, #96f58F, #2F8D27);
    background: -moz-linear-gradient(left, #96f58F, #2F8D27);
    background: -ms-linear-gradient(left, #96f58F, #2F8D27);
    background: -o-linear-gradient(left, #96f58F, #2F8D27);
    background: linear-gradient(to right, #96f58F, #2F8D27);
}

.rg-bar-renderer-bar-top {
    background: #2F8D27;
    background: -webkit-linear-gradient(bottom, #96f58F, #2F8D27);
    background: -moz-linear-gradient(bottom, #96f58F, #2F8D27);
    background: -ms-linear-gradient(bottom, #96f58F, #2F8D27);
    background: -o-linear-gradient(bottom, #96f58F, #2F8D27);
    background: linear-gradient(to top, #96f58F, #2F8D27);
}

.rg-bar-renderer-bar-bottom {
    background: #2F8D27;
    background: -webkit-linear-gradient(top, #96f58F, #2F8D27);
    background: -moz-linear-gradient(top, #96f58F, #2F8D27);
    background: -ms-linear-gradient(top, #96f58F, #2F8D27);
    background: -o-linear-gradient(top, #96f58F, #2F8D27);
    background: linear-gradient(to bottom, #96f58F, #2F8D27);
}

막대 상자의 색상을 변경하고 싶을때 필요한 realgrid-styels.css 파일을 참고하여 css 스타일들을 추가하여 사용하시면 됩니다. 컬럼의 각 막대 상자의 색 linear-gradient가 아닌 solid Red, Green, Blue, Yellow로 바꿔보도록 하겠습니다.

아래 스타일을 추가

.red-bar-solid .rg-bar-renderer-bar {
  background: #ff0000;
}

.green-bar-solid .rg-bar-renderer-bar-right {
  background: #00ff00;
}

.blue-bar-solid .rg-bar-renderer-bar-top {
  background: #0000ff;
}

.yellow-bar-solid .rg-bar-renderer-bar-bottom {
  background: #ffff00;
}