바 렌더러
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;
}