범례 설정

차트 범례는 차트에 나타나는 데이터집합에 대한 데이터를 보여줍니다.

설정 옵션

범례 설정은 options.legend로 전달됩니다. 차트 범례에 대한 전역 옵션은 Chart.defaults.global.legend 에 정의되어 있습니다.

위치

범례의 위치를 지정합니다. 옵션들은:

• 'top'
• 'left'
• 'bottom'
• 'right'

정렬

범례를 정렬합니다. 옵션들은:

• 'start'
• 'center'
• 'end'

인식되지 않은 값들의 기본 값은 'center'입니다.

범례 라벨 설정

범례 라벨 설정은 labels 키를 사용하여 범례 설정 아래에 중첩됩니다.

범례 항목 인터페이스

범례의 onClick 함수에 넘겨진 항목들은 labels.generateLabels 로 부터 반환된 것입니다. 이 항목들은 다음의 인터페이스를 구현해야 합니다.

{
    // 라벨이 표시될 것입니다
    text: string,

    // 범례 박스의 스타일을 채웁니다
    fillStyle: Color,

    // 만약 true이면, 이 항목은 숨겨진 데이터집합을 나타냅니다. 라벨은 관통 효과와 함계 그려질 것입니다
    hidden: boolean,

    // 박스 테두리를 위한 설정입니다. https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/lineCap 를 확인하세요
    lineCap: string,

    // 박스 테두리를 위한 설정입니다. https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash 를 확인하세요
    lineDash: number[],

    // 박스 테두리를 위한 설정입니다. https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset 를 확인하세요
    lineDashOffset: number,

    // 박스 테두리를 위한 설정입니다. https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin 를 확인하세요
    lineJoin: string,

    // 박스 테두리를 넓이
    lineWidth: number,

    // 범례 박스의 획 스타일
    strokeStyle: Color,

    // 범례 박스의 포인트 스타일P (usePointStyle이 true일 때만 사용됩니다)
    pointStyle: string | Image,

    // 포인트의 회전 정도 (usePointStyle이 true일 때만 사용됩니다)
    rotation: number
}

예제

다음의 예제는 범례가 포함된 차트를 만들고 모든 텍스트의 색상을 빨간색으로 바꿀 것입니다.

var chart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: {
        legend: {
            display: true,
            labels: {
                fontColor: 'rgb(255, 99, 132)'
            }
        }
    }
});

클릭시 사용자 지정

범례의 항목이 클릭됬을 때 다른 동작을 작동시키길 원하는 것은 흔한 경우일 수 있습니다. 이것은 설정 객체에서 콜백을 사용하여 쉽게 달성 할 수 있습니다.

기본 범례 클릭 처리자는:

function(e, legendItem) {
    var index = legendItem.datasetIndex;
    var ci = this.chart;
    var meta = ci.getDatasetMeta(index);

    // controller.isDatasetVisible 주석을 참고하세요
    meta.hidden = meta.hidden === null ? !ci.data.datasets[index].hidden : null;

    // 우리는 데이터 집합을 숨겼습니다 ... 차트를 다시 렌더링합니다
    ci.update();
}

처음 두 데이터집합의 표시를 연결하려고 한다고 가정하겠습니다. 그에 맞춰 클릭 처리자를 변경할 수 있습니다.

var defaultLegendClickHandler = Chart.defaults.global.legend.onClick;
var newLegendClickHandler = function (e, legendItem) {
    var index = legendItem.datasetIndex;

    if (index > 1) {
        // 원래 로직을 수행합니다
        defaultLegendClickHandler(e, legendItem);
    } else {
        let ci = this.chart;
        [
            ci.getDatasetMeta(0),
            ci.getDatasetMeta(1)
        ].forEach(function(meta) {
            meta.hidden = meta.hidden === null ? !ci.data.datasets[index].hidden : null;
        });
        ci.update();
    }
};

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        legend: {
            onClick: newLegendClickHandler
        }
    }
});

이제 이 차트의 범례를 클릭할 때, 처음 두 데이터집합의 가시성을 연결할 것입니다.

HTML 범례

가끔 매우 복잡한 범례가 필요합니다. 이러한 경우들은, HTML 범례를 생성하는 것이 좋습니다. 차트는 프로토타입에서 범례를 위한 HTML 문자열을 반환하는 generateLegend() 메소드를 제공합니다.

이 범례가 생성되는 방법을 설정하기 위해, legendCallback 설정 속성을 바꿀 수 있습니다.

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        legendCallback: function(chart) {
            // 여기서 HTML 문자열이 반환됩니다.
        }
    }
});

legendCallback은 자동으로 호출되지 않는다는 점을 주의하시고 이 메소드를 사용하여 범례를 생성할 때 generateLegend()를 반드시 코드 내에서 호출해야 합니다.