chart.js

Modes

원문 :  http://www.chartjs.org/docs/latest/general/interactions/modes.html


 

Interaction Modes

hover 또는 tooltip 을 통해 그래프와의 상호 작용을 구성 할 때 다양한 모드를 사용할 수 있습니다.

mode 는 아래에 자세히 설명되어 있으며 intersect 설정과 함께 어떻게 작동하는지 설명합니다.

 

point

점과 교차하는 모든 항목을 찾습니다.

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        tooltips: {
            mode: 'point'
        }
    }
})

 

nearest

점에 가장 가까운 항목 ( 하나만 ) 을 가져옵니다.

가장 가까운 항목은 차트 항목의 중심까지의 거리 ( 점, 막대 ) 에 따라 결정됩니다.

두 개 이상의 항목이 같은 거리에 있으면 가장 작은 영역을 가진 항목이 사용됩니다.

intersect 가 true 인 경우 마우스 위치가 그래프 항목과 교차 할 때만 trigger 됩니다.

이 기능은 포인트가 막대 뒤에 숨겨진 콤보 차트에 매우 유용합니다.

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        tooltips: {
            mode: 'nearest'
        }
    }
})

 

index

같은 index 에 있는 항목을 찾습니다.

intersect : true 이면 첫 번째 교차 항목이 데이터의 index 를 결정하는 데 사용됩니다.

intersect : false 인 경우 가장 가까운 항목을 사용하여 index 를 결정합니다.

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        tooltips: {
            mode: 'index'
        }
    }
})

 

dataset

동일한 dataset 의 항목을 찾습니다.

intersect : true 이면 첫 번째 교차 항목이 데이터의 index 를 결정하는 데 사용됩니다.

intersect : false 인 경우 가장 가까운 항목을 사용하여 index 를 결정합니다.

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        tooltips: {
            mode: 'dataset'
        }
    }
})

 

x

위치의 x 좌표만을 기준으로 교차하는 모든 항목을 반환합니다.

수직 커서 구현에 유용합니다. 

cartesian 차트에만 적용됩니다.

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        tooltips: {
            mode: 'x'
        }
    }
})

 

y

위치의 y 좌표를 기준으로 교차하는 모든 항목을 반환합니다. 

수평 커서 구현에 유용합니다.

cartesian 차트에만 적용됩니다.

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        tooltips: {
            mode: 'y'
        }
    }
})

 

댓글

댓글 본문
작성자
비밀번호
버전 관리
gamza
현재 버전
선택 버전
graphittie 자세히 보기