상호작용 모드

호버 또는 툴팁을 통하여 그래프 상호작용을 설정할 때, 사용 가능한 몇개의 다른 모드가 있습니다.

아래에 모드와 intersect 설정 방법과 관련하여 동작하는 방법이 자세히 나와있습니다.

point

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

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

nearest

점과 가장 가까운 거리에 있는 항목들을 가져옵니다. 가장 가까운 항목은 차트 항목 (점, 막대)의 가운데 거리를 기반으로 알아냅니다. axis 설정을 정의하여 거리 계산에 사용되는 방향을 사용할 수 있습니다. 만약 intersect가 true이면, 마우스 위치가 그래프 항목을 교차할 때만 트리거됩니다. 여러 차트를 사용하여 점이 막대 뒤에 숨겨졌을 때 매우 유용합니다.

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

single (deprecated)

점과 그것을 반환하는 첫번짹 항목을 찾습니다. 동작은 intersect = true이면서 'nearest'모드일 때와 같습니다.

label (deprecated)

'index' 모드를 확인해주세요.

index

같은 인데스인 항복을 찾습니다. 만약 intersect 설정이 true이면, 첫번째 교차 항목은 데이터 안의 인덱스를 결정하는데 사용됩니다. 만약 intersect 설정이 false이면 x 축으로 가장 가까운 항목이 인덱스를 결정하는데 사용됩니다.

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

y 축을 따라 검색하는 가로 막대형 차트와 같은 차트에서 인데스 모드를 사용하려면 v2.7.0에 소개된 axis 설정을 사용할 수 있습니다. y 방향에서 이 값을 'y'로 설정하여 사용합니다.

var chart = new Chart(ctx, {
    type: 'horizontalBar',
    data: data,
    options: {
        tooltips: {
            mode: 'index',
            axis: 'y'
        }
    }
});

x-axis (deprecated)

intersect = false이면서 'index' 모드일 때와 같이 동작합니다.

dataset

같은 데이터 그룹인 항목을 찾습니다. intersect 설정이 true이면, 첫번째 교차 항목은 데이터 인덱스를 결정하는데 사용됩니다. 만약 intersect이 false이면 가장 가까운 항목이 인덱스를 결정하는데 사용됩니다.

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

x

위치의 X 좌표를 기반으로만 교차할 모든 항목들을 반환합니다. 새로방향 커서 구현을 위해 유용할 것입니다. 데카르트 차트에서만 적용됨을 주의하세요.

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

y

위치의 Y 좌표를 기준으로 교차할 모든 항목들을 반환합니다. 가로 방향 커서를 구현할 때 매우 유용할 것입니다. 데카르트 차트일 때만 적용됨을 주의해주세요.

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

모드