툴팁

툴팁 설정

툴팁 설정은 options.tooltips 네임스페이스 안에 넘깁니다. 차트 툴팁 전역 설정은 Chart.defaults.global.tooltips에 정의되어 있습니다.

위치 모드

가능한 모드는:

• 'average'
• 'nearest'

'average' 모드는 툴팁에 보여지는 항목들의 평균 위치에 툴팁이 위치하게 됩니다. 'nearest' 모드는 이벤트 위치에서 가장 가까운 요소의 위치에 툴팁이 위치하게 됩니다.

새로운 모드는 Chart.Tooltip.positioners 맵에 함수로 추가 정의할 수 있습니다.

예시:

/**
 * 맞춤 위치자
 * @function Chart.Tooltip.positioners.custom
 * @param elements {Chart.Element[]} 툴팁 요소들
 * @param eventPosition {Point} 캔버스 좌표 이벤트의 위치
 * @returns {Point} 툴팁 위치
 */
Chart.Tooltip.positioners.custom = function(elements, eventPosition) {
    /** @type {Chart.Tooltip} */
    var tooltip = this;

    /* ... */

    return {
        x: 0,
        y: 0
    };
};

정렬

The titleAlign, bodyAlign 과 footerAlign 옵션은 툴팁 상자에 대한 텍스트 라인들의 가로방향 위치를 정의합니다. 다음의 값들을 지원합니다.

• 'left' (기본 값)
• 'right'
• 'center'

이 옵션들은 텍스트 라인에 대해서만 적용됩니다. 색상 상자는 항상 왼쪽 끝으로 정렬됩니다.

정렬 콜백

툴팁 항목들의 정렬을 허용합니다. 최소한 Array.prototype.sort에 전달할 수 있는 함수를 구현해야 합니다. 이 함수는 3번째 매개변수에 차트에 넘겨진 데이터 객체를 사용할 수도 있습니다.

필터 콜백

툴팁 항목들의 필터링을 허용합니다. 최소한 Array.prototype.filter에 전달할 수 있는 함수를 구현해야 합니다. 이 함수는 2번째 매개변수에 차트에 넘겨진 데이터 객체를 사용할 수도 있습니다.

툴팁 콜백

툴팁 라벨 설정은 아래 툴팁 설정 안에 callbacks 키를 사용합니다. 툴팁은 텍스트를 제공하기 위해 다음과 같은 콜백이 있습니다. 모든 함수들의, this는 Chart.Tooltip 생성자를 통해 만들어진 툴팁 객체입니다.

모든 함수들은 같은 인자들로 호출됩니다: 차트에 넘겨진 툴팁 항목과 data 객체입니다. 모든 함수들은 문자열 또는 문자열 배열을 반환해야만 합니다. 문자열의 배열은 여러줄의 텍스트로 처리됩니다.

라벨 콜백

label 콜백은 주어진 데이터 포인트에 대해 표시되는 텍스트를 바꿀 수 있습니다. 데이터 값을 반올림 하는 일반적인 예시입니다: 다음의 예시는 데이터를 소수점 이하 2자리로 반올림합니다.

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        tooltips: {
            callbacks: {
                label: function(tooltipItem, data) {
                    var label = data.datasets[tooltipItem.datasetIndex].label || '';

                    if (label) {
                        label += ': ';
                    }
                    label += Math.round(tooltipItem.yLabel * 100) / 100;
                    return label;
                }
            }
        }
    }
});

라벨 색상 콜백

예를 들어, 툴팁의 각 항목에 대해 빨간 상자를 반환하고 싶다면 이렇게 할 수 있습니다:

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        tooltips: {
            callbacks: {
                labelColor: function(tooltipItem, chart) {
                    return {
                        borderColor: 'rgb(255, 0, 0)',
                        backgroundColor: 'rgb(255, 0, 0)'
                    };
                },
                labelTextColor: function(tooltipItem, chart) {
                    return '#543453';
                }
            }
        }
    }
});

툴팁 항목 인터페이스

툴팁 항목들은 다음의 인터페이스로 구현된 툴팁 콜백으로 넘겨집니다.

{
    // 툴팁 라벨
    label: string,

    // 툴팁 값
    value: string,

    // 툴팁의 X 값
    // (deprecated) 대신 `value` 또는 `label` 을 사용하세요
    xLabel: number | string,

    // 툴팁의 Y 값
    // (deprecated) 대신 `value` 또는 `label` 을 사용하세요
    yLabel: number | string,

    // 항목이 나온 데이터 그룹의 위치
    datasetIndex: number,

    // 데이터그룹에서 이 데이터 항목의 위치
    index: number,

    // 일치점의 X 위치
    x: number,

    // 일치점의 Y 위치
    y: number
}

외부 (사용자 정의) 툴팁

사용자 정의 툴팁은 툴팁 그리기 과정에 연결할 수 있으므로 사용자 정의 방식으로 툴팁을 그릴 수 있습니다. 일반적으로 이것은 oncanvas 대신 HTML 툴팁을 만드는데 사용됩니다. 다음과 같이 사용자 정의 툴팁을 전역 또는 차트 설정으로 할 수도 있습니다:

var myPieChart = new Chart(ctx, {
    type: 'pie',
    data: data,
    options: {
        tooltips: {
            // on-canvas 툴팁을 금지합니다
            enabled: false,

            custom: function(tooltipModel) {
                // 툴팁 요소
                var tooltipEl = document.getElementById('chartjs-tooltip');

                // 첫번째 그리기에서 요소 만들기
                if (!tooltipEl) {
                    tooltipEl = document.createElement('div');
                    tooltipEl.id = 'chartjs-tooltip';
                    tooltipEl.innerHTML = '<table></table>';
                    document.body.appendChild(tooltipEl);
                }

                // 툴팁이 없으면 숨기기
                if (tooltipModel.opacity === 0) {
                    tooltipEl.style.opacity = 0;
                    return;
                }

                // 캐럿 위치 설정
                tooltipEl.classList.remove('above', 'below', 'no-transform');
                if (tooltipModel.yAlign) {
                    tooltipEl.classList.add(tooltipModel.yAlign);
                } else {
                    tooltipEl.classList.add('no-transform');
                }

                function getBody(bodyItem) {
                    return bodyItem.lines;
                }

                // 텍스트 설정
                if (tooltipModel.body) {
                    var titleLines = tooltipModel.title || [];
                    var bodyLines = tooltipModel.body.map(getBody);

                    var innerHtml = '<thead>';

                    titleLines.forEach(function(title) {
                        innerHtml += '<tr><th>' + title + '</th></tr>';
                    });
                    innerHtml += '</thead><tbody>';

                    bodyLines.forEach(function(body, i) {
                        var colors = tooltipModel.labelColors[i];
                        var style = 'background:' + colors.backgroundColor;
                        style += '; border-color:' + colors.borderColor;
                        style += '; border-width: 2px';
                        var span = '<span style="' + style + '"></span>';
                        innerHtml += '<tr><td>' + span + body + '</td></tr>';
                    });
                    innerHtml += '</tbody>';

                    var tableRoot = tooltipEl.querySelector('table');
                    tableRoot.innerHTML = innerHtml;
                }

                // `this` 전반적인 툴팁이 될 것입니다
                var position = this._chart.canvas.getBoundingClientRect();

                // 폰트에 대한 보여지기, 위치, 그리고 스타일을 설정합니다
                tooltipEl.style.opacity = 1;
                tooltipEl.style.position = 'absolute';
                tooltipEl.style.left = position.left + window.pageXOffset + tooltipModel.caretX + 'px';
                tooltipEl.style.top = position.top + window.pageYOffset + tooltipModel.caretY + 'px';
                tooltipEl.style.fontFamily = tooltipModel._bodyFontFamily;
                tooltipEl.style.fontSize = tooltipModel.bodyFontSize + 'px';
                tooltipEl.style.fontStyle = tooltipModel._bodyFontStyle;
                tooltipEl.style.padding = tooltipModel.yPadding + 'px ' + tooltipModel.xPadding + 'px';
                tooltipEl.style.pointerEvents = 'none';
            }
        }
    }
});

사용자 정의 툴팁을 어떻게 시작하는지에 대한 예시들을 확인하세요.

툴팁 모델

툴팁 모델에는 툴팁을 그리는데 사용할 수 있는 매개변수를 가집니다.

{
    // 툴팁에 그려질 항목들. 툴팁 항목 인터페이스 부분을 확인하세요
    dataPoints: TooltipItem[],

    // 위치
    xPadding: number,
    yPadding: number,
    xAlign: string,
    yAlign: string,

    // 툴팁의 위 왼쪽에 대한 X 와 Y 속성
    x: number,
    y: number,
    width: number,
    height: number,
    // 툴팁 포인트 위치
    caretX: number,
    caretY: number,

    // 몸부분
    // 그려져야 하는 몸부분 라인
    // 각 객체는 3개의 매개변수를 가집니다
    // before: string[] // 색 사각형이 있는 줄 앞의 텍스트 줄
    // lines: string[], // 색 사각형에 기본 항목으로 그려질 텍스트 줄
    // after: string[], // 주요 줄 후에 그려질 텍스트 줄
    body: object[],
    // 제목 뒤에 있지만 몸부분 전에 있는 줄
    beforeBody: string[],
    // 몸부분 후와 꼬리말 전에 있는 줄
    afterBody: string[],
    bodyFontColor: Color,
    _bodyFontFamily: string,
    _bodyFontStyle: string,
    _bodyAlign: string,
    bodyFontSize: number,
    bodySpacing: number,

    // 제목
    // 제목을 구성하는 텍스트 줄
    title: string[],
    titleFontColor: Color,
    _titleFontFamily: string,
    _titleFontStyle: string,
    titleFontSize: number,
    _titleAlign: string,
    titleSpacing: number,
    titleMarginBottom: number,

    // 꼬리말
    // 꼬리말을 구성하는 텍스트 줄
    footer: string[],
    footerFontColor: Color,
    _footerFontFamily: string,
    _footerFontStyle: string,
    footerFontSize: number,
    _footerAlign: string,
    footerSpacing: number,
    footerMarginTop: number,

    // 외관
    caretSize: number,
    caretPadding: number,
    cornerRadius: number,
    backgroundColor: Color,

    // body[]의 각 항목에 대해 그려질 색상. 이것은 툴팁의 사각형의 색상입니다
    labelColors: Color[],
    labelTextColors: Color[],

    // 0 불투명도는 툴팁을 숨깁니다
    opacity: number,
    legendColorBackground: Color,
    displayColors: boolean,
    borderColor: Color,
    borderWidth: number
}