새로운 차트

Chart.js 2.0는 각 데이터집합에 대한 컨트롤러 개념을 소개하였습니다. 스케일과 같이 필요에 따라 새로운 컨트롤러를 작성할 수 있습니다.

Chart.controllers.MyType = Chart.DatasetController.extend({

});


// Chart.js API를 사용하여 차트의 새로운 인스턴스를 만들 수 있습니다
new Chart(ctx, {
    // 이것은 등록된 생성자의 문자열입니다, ie Chart.controllers.MyType
    type: 'MyType',
    data: data,
    options: options
});

데이터집합 컨트롤러 인터페이스

데이터집합 컨트롤러는 다음의 인터페이스로 구현되야합니다.

{
    // 데이터집합 안에 데이터의 각 조각에 대한 요소를 생성. 데이터집합의 배열에 요소를 dataset.metaData로 저장
    addElements: function() {},

    // 상태에 주어딘 인덱스와 리셋 데이터에 대한 단일 요소를 생성
    addElementAndReset: function(index) {},

    // 데이터집합의 표현을 그립니다
    // @param ease : 만약 지정된다면 이 숫자는 요소를 전환할 거리를 표현합니다. 제공된 컨트롤러에서 draw()의 구현을 참조하여 사용되는 방법을 확인하세요
    draw: function(ease) {},

    // 주어진 요소에서 호버 스타일링을 지웁니다
    removeHoverStyle: function(element) {},

    // 주어진 요소에 호버 스타일링을 추가합니다
    setHoverStyle: function(element) {},

    // 새 데이터에 대한 응담으로 요소를 업데이트
    // @param reset : true이면, 요소를 리셋 상태 안에 두므로 마지막 값으로 애니메이션할 수 있습니다
    update: function(reset) {}
}

다음의 메소드는 파생된 데이터집합 컨트롤러에 의해 선택적으로 재정의 될 수 있습니다.

{
    // 컨트롤러 초기화
    initialize: function(chart, datasetIndex) {},

    // 이 컨트롤러가 나타내는 데이터집합이 스케일에 연결되어 있는지 확인합니다. 극좌표의 helpers.noop와 도넛의 컨트롤러로 재정의합니다
    // 단일 스케일을 사용하는 차트 유형
    linkScales: function() {},

    // 업데이트가 트리거 되었을 때 메인 차트 컨트롤러에 의해 호출됩니다. 기본 구현은 데이터 포인트의 변환과 적절하게 생성된 요소들의 숫자를 처리합니다.
    buildOrUpdateElements: function() {}
}

기존 차트 유형 확장

기존 컨트롤러 유형의 확장 또는 변환은 쉽습니다. 기본 제공 유형 중 하나의 생성자를 자신의 것으로 대체하기만 하면 됩니다.

기본 제공 컨트롤러 유형은:

• Chart.controllers.line
• Chart.controllers.bar
• Chart.controllers.radar
• Chart.controllers.doughnut
• Chart.controllers.polarArea
• Chart.controllers.bubble

예를 들어 새로운 버블 차트로 부터 확장된 차트 유형을 파생하려면 다음과 같이 해야 합니다.

// 'derivedBubble'에 대한 기본 설정을 버블 기본 값과 동일하게 설정합니다.
// Chart.defaults[chartType]을 수행하여 기본 값을 찾습니다
// 기본 값이 존재하지 않아서 버그가 있는 것 같아 보입니다
Chart.defaults.derivedBubble = Chart.defaults.bubble;

// Chart.controllers.bubble.extend({ extensions here });를 사용하는 것이 좋을 것 같습니다
var custom = Chart.controllers.bubble.extend({
    draw: function(ease) {
        // 먼저 super 메소드를 호출합니다
        Chart.controllers.bubble.prototype.draw.call(this, ease);

        // 이제 이 데이터집합에 대한 사용자 정의 그리기를 할 수 있습니다. 각 데이터집합에 있는 첫번째 포인트에 둥근 빨간 상자를 그릴 것입니다
        var meta = this.getMeta();
        var pt0 = meta.data[0];
        var radius = pt0._view.radius;

        var ctx = this.chart.chart.ctx;
        ctx.save();
        ctx.strokeStyle = 'red';
        ctx.lineWidth = 1;
        ctx.strokeRect(pt0._view.x - radius, pt0._view.y - radius, 2 * radius, 2 * radius);
        ctx.restore();
    }
});

// 차트 초기화 루틴이 조회할 수 있도록 컨트롤러를 저장합니다
// Chart.controllers[type]
Chart.controllers.derivedBubble = custom;

// 이제 우리가 생성한 새로운 차트 유형을 생성하고 사용할 수 있습니다
new Chart(ctx, {
    type: 'derivedBubble',
    data: data,
    options: options
});

막대 컨트롤러

막대 컨트롤러는 특별한 속성을 가진다는 사실을 알아둘 필요가 있습니다. 막대의 두께를 정확히 계산하기 위해 컨트롤러는 막대와 매핑되는 데이터집합의 숫자를 결정해야만 합니다. 이렇게 하기 위해 막대 컨트롤러는 초기화 하는 동안 데이터집합에 bar 속성을 추가합니다. 만약 변경 또는 업데이트된 막대 컨트롤러를 만들었다면 똑같이 해야 합니다. 이렇게 하면 막대가 있는 차트와 새로운 파생 막대는 원활하게 작동할 것입니다.