특정 계열을 위한, 사용자 정의 툴팁(Tooltip) 및 데이터 포인트 설정 방법

특정 계열을 위한, 사용자 정의 툴팁(Tooltip) 및 데이터 포인트 설정 방법 > 블로그 & Tips

특정 계열을 위한, 사용자 정의 툴팁(Tooltip) 및 데이터 포인트 설정 방법

추천0

페이지 정보

작성자 GrapeCity

작성일 2019-04-17 15:27 조회 5,477회 댓글 0건

본문

맞춤형 시리즈 툴팁

툴팁은 모든 차트에서 필수적이며 매우 일반적입니다. 툴팁의 가장 중요한 기능은 차트에서 타 표현할 수 없는 데이터 요소에 대한 추가 정보를 표시하는 것입니다. 이번 버전에서 FlexChart 계열(series)에는 새로운 tooltipContent 속성을 추가하였습니다. 이는 특정 계열(Series)의 글로벌(Global) 툴팁(Tooltip) 내용을 대체합니다. 텍스트 내에 바인딩 된 데이터를 표시하기 위해 동일한 문자열 매개 변수를 지원합니다.

아래 코드 샘플은 메인 컨트롤 툴팁과 새로운 계열 툴팁 내용을 보여줍니다.

let myChart = new chart.FlexChart('#chart', {  
        bindingX: 'country',  
        series: [{  
                binding: 'sales',  
                name: 'Sales'  
            }, {  
                binding: 'downloads',  
                name: 'Downloads',  
                // custom series tooltip  
                tooltipContent: 'Downloads: {downloads}'  
            }],  
        tooltip: { // global tooltip  
            content: '<b>Country: </b>{country}</br>Sales: {sales}';  
            }  
        }  
    });

맞춤형 시리즈 툴팁

커스텀 시리즈 포맷터(Formatter)

itemFormatter는 차트 요소의 모양을 사용자 정의할 수 있는 기능을 제공합니다. 이를 사용하여 차트에 조건부 서식을 적용하는 데 사용할 수 있습니다.

이 함수에는 세 가지 인수가 사용됩니다.

차트에서 요소를 렌더링하는 렌더링 엔진
어떤 데이터 포인트가 렌더링되는지에 대한 Hit-Test 테스트 정보
항목의 기본 렌더링을 제공하는 함수

전역 (차트 전체) itemFormatter는 모든 데이터 포인트(Point)에 적용되므로, 계열(Series) 포맷터(Formatter)를 사용하면 각 계열을 완전히 다른 방식으로 쉽고 빠르게 사용자 정의할 수 있습니다. 이 예제에서 itemFormatter 는 특정 계열에 대한 화살표를 그리는 데 사용됩니다.

let myChart = new chart.FlexChart('#chart', {  
        chartType: 'LineSymbols',  
        bindingX: 'hour',  
        series: [  
            {  
                binding: 't',  
                name: 'temperature'  
            },  
            {  
                chartType: "Scatter",  
                binding: 'wspeed',  
                name: 'wind speed',  
                // series itemFormatter  
                itemFormatter: (engine, ht, render) => {  
                    render();  
                    var dir = ht.item.wdir;  
                    drawArrow(engine, ht.point, dir);  
                }  
            }  
        ],  
        // global itemFormatter  
        itemFormatter: (engine, hitTestInfo, defaultRenderer) => {  
            var ht = hitTestInfo;  
            if (ht.x < 8) {  
                engine.stroke = 'red';  
                engine.fill = 'rgba(255,0,0,0.7)';  
            }  
            defaultRenderer();  
        }  
    });

커스텀 시리즈 포맷터