FlexChart 렌더 주기(Render Cycle)

FlexChart는 데이터 기반입니다. 바인딩된 데이터 또는 해당 속성에 변경 사항이 있는 경우, 차트는 다음 단계로 구성된 렌더링 주기를 거칩니다:

1. 데이터 가져오기: 차트에는 전체 데이터 소스를 나타내는 itemsSource 속성이 있으며, 각 계열(Series)는 자체 로컬 itemsSource 속성을 사용하여 이를 재정의할 수 있습니다. 유사하게, 차트에는 각 계열(Series)에 대해 차트로 표시할 값을 결정하는 bindingX 및 binding 속성이 있습니다. 대부분 차트 객체에 __itemsSource__와 bindingX 속성을 설정하고 각 계열(Series)에 binding 속성을 설정합니다.
2. 데이터 확장: 차트의 축에서 최소 및 최대 속성을 설정하여 차트의 범위를 설정할 수 있습니다. 기본적으로 이러한 속성은 null로 설정되어 차트의 크기가 자동으로 조정됩니다. 기본적으로 계열(Series)는 차트의 기본 축인 axisX 및 __axisY__를 사용합니다; 그러나 추가 축을 만들고 해당 축을 하나 이상의 계열(Series)에 할당할 수 있습니다.
3. 렌더링 이벤트 발생: 이 때 차트는 비어 있습니다. 이벤트 핸들러는 rendering 이벤트의 engine 매개변수를 사용하여 차트 데이터 뒤에서 렌더링할 사용자 정의 요소를 추가할 수 있습니다. 이는 알람 영역과 같은 배경 요소를 추가하는 데 사용할 수 있습니다.
4. 각 계열(Series) 렌더링: 이 단계에서 차트는 각 계열(Series)을 나타내는 하나 이상의 SVG 요소를 만듭니다. 가장 간단하고 효율적인 차트 유형은 '선(Line)' 및 '스플라인(Spline)'이며 일반적으로 단일 SVG 요소로 나타낼 수 있습니다. 다른 차트 유형은 막대 및 기호를 렌더링하는 데 더 많은 요소가 필요합니다. 차트는 itemFormatter 속성으로 지정된 콜백을 불러와 각 계열(Series)의 특정 포인트에 대해 사용자 정의할 수 있습니다. 축에는 축 레이블을 사용자 정의할 수 있는 itemFormatter 속성도 있습니다.
5. 렌더링된 이벤트 발생: 이제 차트가 완전히 렌더링되었습니다. 이벤트 핸들러는 렌더링 된 이벤트의 engine 매개변수를 사용하여 차트 데이터 위에 렌더링할 사용자 정의 요소를 추가할 수 있습니다. 포인트 주석과 같은 요소를 추가하는 데 사용할 수 있습니다.

예시: 렌더링 전후의 시간을 출력합니다.

rendering: function(s, e) {
    var pt = myChart.dataToPoint(0, myChart.axisY.actualMax);
    e.engine.drawString('rendering ' + Date.now(), pt, 'annotation');
    },
rendered: function(s, e) {
    var pt = myChart.dataToPoint(0, myChart.axisY.actualMin);
    e.engine.drawString('rendered ' + Date.now(), pt, 'annotation');
    }