차트 프로토타입 메소드

각가의 차트는 공유 차트 유형에 유용하게 사용할 수 있는 글로벌 프로토타입 메소드가 있습니다. Chart.js로 만들어진 모든 차트들은 사용이 가능합니다. 예시로 우리가 만든 선형 차트를 사용하겠습니다.

// 예시:
var myLineChart = new Chart(ctx, config);

.destroy()

생성된 모든 차트의 인스턴스를 삭제사려면 이것을 사용하면 됩니다. 이렇게 하면 Chart.js에 의해 연결된 모든 관련 이벤트 리스너와 함께 Chart.js 내의 차트 객체에 저장된 모든 참조가 정리됩니다. 이것은 반드시 새로운 차트를 재사용하는 캔버스 전에 호출되야 합니다.

// 특정 차트 인스턴스 삭제
myLineChart.destroy();

.update(config)

차트의 업데이트를 트리거합니다. 데이터 객체 업데이트 후 안전하게 호출할 수 있습니다. 모든 스케일, 범례 그리고 새로 그려지는 차트를 업데이트 합니다.

// duration은 밀리초로 다시 그려지는 애니메이션에 대한 시간입니다
// lazy는 boolean입니다. true이면, 애니메이션은 다른 애니메이션에 의해 중단될 수 있습니다
myLineChart.data.datasets[0].data[2] = 50; // 첫번째 데이터집합의 'March' 값을 50으로 업데이트 합니다
myLineChart.update(); // 업데이트를 호출하면 March의 위치를 90에서 50으로 애니메이션됩니다.

주의: 데이터 참조 교체 (e.g. myLineChart.data = {datasets: [...]}는 version 2.6 부터 동작합니다. 이전 버전에서는 전체 데이터 객체 교체는 다음과 같은 방법으로 할 수 있습니다: myLineChart.config.data = {datasets: [...]}.

config 객체는 업데이트 프로세스에 추가적인 설정을 제공할 수 있습니다. 수동으로 이벤트 핸들러 안에서 update를 호출할 때와 다른 애니메이션이 필요할 때 유용합니다.

다음의 속성들이 지원됩니다:

duration (number): 밀리 초로 새로 그려지는 애니메이션에 대한 시간
lazy (boolean): true이면, 애니메이션은 다른 애니메이션에 의해 중단될 수 있습니다
easing (string): easing 함수 애니메이션. 가능한 값은 애니메이션 Easing 참조.

예시:

myChart.update({
    duration: 800,
    easing: 'easeOutBounce'
});

자세한 사항은 차트 업데이트 참조.

.reset()

애니메이션 초기화 전에 차트의 상태를 리셋합니다. 이렇게 하면 새로운 애니메이션은 update를 사용하여 트리거될 수 있습니다.

myLineChart.reset();

.render(config)

모든 차트 요소들을 새로 그리도록 트리거합니다. 주의, 새로운 데이터에 대한 요소 업데이트는 하지 않습니다. 이 경우 .update()를 사용하세요.

설정 객체에 대한 더 자세한 사항은 .update(config) 참조.

// duration은 밀리초로 새로 그려지는 애니메이션에 대한 시간입니다
// lazy는 boolean입니다. true이면, 애니메이션은 다른 애니메이션에 의해 중단될 수 있습니다
myLineChart.render({
    duration: 800,
    lazy: false,
    easing: 'easeOutBounce'
});

.stop()

모든 현재 애니메이션 반복을 중단할 때 사용합니다. 현재 애니메이션 프레임 동안 차트가 일시 중지됩니다. 다시 애니메이션하려면 .render() 호출하세요.

// 현재 프레임에서 차트 애니메이션 반복을 중단합니다
myLineChart.stop();
// => 채인 가능성을 위해 'this'를 반환합니다

.resize()

캔버스 요소를 수동으로 크기 조정할 때 사용합니다. 캔버스 컨테이너 크기가 조정될 때마다 동작하지만 캔버스 노드 컨테이너 요소의 크기를 변경하면 이 메소드를 수동으로 호출 할 수 있습니다.

// 컨테이너 요소를 채우기 위해 크기 조정 & 다시 그리기
myLineChart.resize();
// => 체인 가능성을 위해 'this'를 반환합니다

.clear()

차트 캔버스를 완전히 지웁니다. 애니메이션 프레임 사이에서 내부적으로 광범위하게 사용되지만 유용할 수 있습니다.

// myLineChart가 그려진 캔버스를 지웁니다
myLineChart.clear();
// => 체인 가능성을 위해 'this'를 반환합니다

.toBase64Image()

현재 상태 차트의 base 64 encoded 문자열을 반환합니다.

myLineChart.toBase64Image();
// => 캔버스 이미지의 png 데이터 url을 반환합니다

.generateLegend()

차트에 대한 범례의 HTML 문자열을 반환합니다. 옵션 안에 legendCallback으로 부터 범례는 생성됩니다.

myLineChart.generateLegend();
// => 이 차트에 대한 범례의 HTML 문자열을 반환합니다

.getElementAtEvent(e)

이벤트 또는 jQuery 이벤트의 인자로 전달하는 차트 인스턴스서 getElementAtEvent(event)를 호출하면 이벤트 위치의 단일 요소가 반환됩니다. 만약 범위 안에 여러 항목들이 있다면 첫번째만 반환됩니다. 이 메소드로부터 반환된 값은 단일 매개변수가 있는 배열입니다. 배열은 get*AtEvent 메소드간에 일괸된 API를 유지하는데 사용됩니다.

myLineChart.getElementAtEvent(e);
// => 이벤트 포인트에서 첫번째 요소를 반환합니다.

클릭된 아이템을 갖기 위해, getElementAtEvent 를 사용할 수 있습니다.

function clickHandler(evt) {
    var firstPoint = myChart.getElementAtEvent(evt)[0];

    if (firstPoint) {
        var label = myChart.data.labels[firstPoint._index];
        var value = myChart.data.datasets[firstPoint._datasetIndex].data[firstPoint._index];
    }
}

.getElementsAtEvent(e)

이벤트 포인트 아래에서 요소를 찾은 다음 동일한 데이터 인덱스에 있는 모든 요소들을 반환합니다. 'label' 모드 하이라이팅을 위해 내부적으로 사용됩니다.

이벤트 또는 jQuery 이벤트의 인수로 전달하는 차트 인스턴스에서 getElementsAtEvent(event)를 호출하면 해당 이벤트의 동일한 위치에 있는 포인트 요소가 반환됩니다.

canvas.onclick = function(evt) {
    var activePoints = myLineChart.getElementsAtEvent(evt);
    // => activePoints는 캔버스에서 클릭 이벤트로서 같은 위치에 있는 포인트의 배열입니다.
};

이 기능은 애플리케이션에서 DOM 기반의 툴팁이나 사용자 지정 동작을 트리거할 때 유용할 수 있습니다.

.getDatasetAtEvent(e)

이벤트 포인트 아래에 요소를 찾은 다음 그 데이터집합으로 부터 모든 요소들을 반환합니다. 'dataset' 모드 하이라이팅을 위해 내부적으로 사용됩니다.

myLineChart.getDatasetAtEvent(e);
// => 요소들의 배열을 반환합니다

.getDatasetMeta(index)

현재 인덱스와 매치되는 데이터집합을 찾고 해당 메타데이터를 반환합니다. 차트의 생성자로 사용된 모든 메타데이터를 가진 데이터를 반환합니다.

메타데이터의 data 속성은 각 포인트, 사각형 등의 정보를 포함합니다. 차트 유형에 따라서요.

Chart.js 테스트에서 허용하는 광범위한 사용예제 방식을 참조할 수 있습니다.

var meta = myChart.getDatasetMeta(0);
var x = meta.data[0]._model.x;

Chart.js API