스타일

RealChart는 차트를 2차원 vector 그래픽을 표현하는 SVG (opens in a new tab)를 이용해서 웹 화면에 그린다. SVG의 모든 element는 다른 HTML element들과 마찬가지로 CSS (opens in a new tab)를 이용해 시각화되므로 차트 구성 요소들의 색상, 폰트 등의 외형은 CSS로 지정된다. 단, SVG에 적용되는 CSS 속성들은 다른 HTML에 적용되는 것과 다소 상이한 것들이 있으므로 주의가 필요하다.
크기나 위치를 CSS로 지정할 수 없으며, 차트 구성 요소에 적용할 수 있는 CSS 속성들은 아래 정도이다.

css property	chart style	적용 대상
fill	fill	글자 색, 도형 내부 채우기 색
fill-opacity	fillOpacity	fill 투명도. 1이 완전 불투명
stroke	stroke	도형 경계 색
stroke-width	strokeWidth	선 두께
stroke-dasharray	strokeDasharray	점선 표시
font-family	fontFamily	폰트 종류
font-size	fontSize	폰트 크기
font-weight	fontWeight	폰트 굵기

Try Style

설정

const config = {
    series[{
        type: 'line',
        style: {
            stroke: 'red',
            strokeDasharray: '4'
        }
    }],
    title: {
        style: {
            fontSize: '20px',
            fill: '#333'
        }
    }
};

Rich Text

RealChart는 축 label, 데이터포인트 label, title 등의 텍스트를 보다 다양한 형태로 표시할 수 있도록 'Rich Text' 모델을 제공한다.
텍스트 속성 문자열에 <tag></tag> 형식의 몇가지 tag를 포함시킬 수 있고, $ 형태의 동적 param을 포함할 수 있는데, 표시되는 값의 format이나 기본값을 동시에 지정할 수 있다. param의 실제값은 텍스트가 표시되는 범위에 따라 실행 시간 동적으로 결정된다.

Try Rich Text

tag

tag	설명
<t></t>	기본 텍스트. 대신 tag 속성으로 style을 지정할 수 있다.
<b></b>	굵은 폰트를 사용한다.
<i></i>	italic 폰트를 사용한다.
<br>, <br/>	줄을 나눈다. 대신 '\r\n'이나 '\n'을 사용할 수 있다.

{
    tooltipText: '<b>${name}</b><br>${series}:<b> ${yValue}</b>',
}

{
    text: '<t style="fill:red">${name}</t><i>${yValue}</i>',
}

param 형식

데이터포인트의 값 등 실행 시간에 알 수 있는 값을 표시할 수 있도록 '$' 또는 '%' 형식을 사용할 수 있다. 괄호 안은 ';'(세미콜론)으로 분리해서 각각 param 이름, 기본값, 표시 형식을 지정할 수 있다.

{
    text: '${name}<b>${yValue;0;#,##0.0}</b>',
}

param의 값은 param을 관리하는 모델이 실행 시간에 결정한다. 예를 들어, series에 설정된 tooltipText은 시리즈가, 축 label에 설정된 text는 축이나 하위 모델에서 값을 계산해서 전달한다.

스타일

설정

Rich Text

tag

param 형식

See Also