범위영역 차트(Area Chart)를 만드는 방법

범위영역 차트(Area Chart)를 만드는 방법 > 블로그 & Tips

범위영역 차트(Area Chart)를 만드는 방법

추천0

페이지 정보

작성자 GrapeCity

작성일 2019-04-17 10:48 조회 5,561회 댓글 0건

본문

관련링크

범위영역차트(Area Chart)는 각 데이터 포인트에 대해, Y 축에 두 개의 값을 표시하고, 그 사이의 영역을 채웁니다. 시간에 따른 범위 기반 데이터 추세를 시각화하는 데 유용합니다.

2019 v1 릴리즈에 여러 가지 새로운 차트 기능을 추가 하였습니다. FlexChart는 바인딩 속성에 대해, 두 개의 필드(상한 및 하한)를 선언 할 때, 기존 'Area'차트 유형을 사용하여 범위 영역 의 차트를 지원합니다.

빠른 예 :

myChart.chartType = 'Area'; myChart.binding = 'min,max';

범위 영역 차트

범위 영역 차트 작성

개념적으로 범위 영역 차트를 두 개의 개별 꺾은 선형 차트와 같이 생각할 수 있습니다. 예를 들어 FlexChart를 사용하여 두 개의 선을 플로팅하는 경우 'min'및 'max'와 같은 두 개의 별도 필드에 바인딩된 두 개의 계열을 정의합니다.

아래 예제는 두 개의 라인 시리즈를 만듭니다.

let myChart = new chart.FlexChart('#chart', {  
        chartType: 'Line',  
        series: [  
            {  
                itemsSource: getData(),  
                bindingX: 'day',  
                binding: 'min',  
                name: 'Min',  
                style: { stroke: 'rgba(236, 189, 230, 0.8)' }  
            },  
            {  
                itemsSource: getData(),  
                bindingX: 'day',  
                binding: 'max',  
                name: 'Max',  
                style: { stroke: 'rgba(136, 189, 230, 0.8)' }  
            }  
        ],  
}

결과는 다음과 같습니다.

범위 영역 차트

이제 chartType 을 'Area' 로 변경하고 계열을 하나로 통합하여, 범위 영역 차트와 동일한 데이터를 시각화 할 수 있습니다. 바인딩 속성은 쉼표로 구분된 범위의 상한 및 하한을 모두 지원합니다.

범위 영역 예 :

let myChart = new chart.FlexChart('#chart', {  
        chartType: 'Area',  
        series: [  

            {  
                itemsSource: getData(),  
                bindingX: 'day',  
                binding: 'min,max',  
                name: 'Range',  
                style: { fill: 'rgba(136, 189, 230, 0.8)', stroke: 'transparent' }  
            }  
        ]  
}

결과 범위 영역 차트는 다음과 같습니다. name 속성을 사용하여 범례 텍스트 (기본적으로 필드 이름을 사용함)를 설정할 수 있습니다 .

범위 영역 차트