혼합 차트 유형

Chart.js를 사용하면, 둘 이상의 다른 차트 유형이 조합된 혼합 차트를 만들 수 있습니다. 흔한 예시로 막대 차트에 선형 데이터집합을 포함할 수 있습니다.

혼합 차트 만들기는 기본 차트의 초기화로 시작됩니다.

var myChart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: options
});

이 지점에서 표준 막대 차트를 가집니다. 이제 데이터집합 중 하나를 선형 데이터집합으로 변환해야 합니다.

var mixedChart = new Chart(ctx, {
    type: 'bar',
    data: {
        datasets: [{
            label: '막대형 데이터집합',
            data: [10, 20, 30, 40]
        }, {
            label: '선형 데이터집합',
            data: [50, 50, 50, 50],

            // 이 데이터집합이 선형으로 변경됩니다
            type: 'line'
        }],
        labels: ['January', 'February', 'March', 'April']
    },
    options: options
});

이 시점에서 우리가 원하는 방식으로 그려지는 차트를 가집니다. 이 경우 선형 차트의 기본 옵션이 합쳐지지 않는다는 점에 유의해야 합니다. 기본 유형에 대한 옵션만 합쳐집니다. 이 경우, 막대형 차트의 기본 옵션이 type 필드에 지정된 유형이기 때문에 합쳐진 것입니다.

그려지는 순서

기본적으로, 데이터집합은 첫번째 항목이 맨 위에 있도록 그려집니다. 이는 데이터집합 옵션의 order 옵션을 지정하면 변경할 수 있습니다. order의 기본 값은 0입니다.

var mixedChart = new Chart(ctx, {
    type: 'bar',
    data: {
        datasets: [{
            label: '막대형 데이터집합',
            data: [10, 20, 30, 40],
            // 이 데이터집합은 아래에 그려집니다
            order: 1
        }, {
            label: '선형 데이터집합',
            data: [10, 10, 10, 10],
            type: 'line',
            // 이 데이터집합은 위에 그려집니다
            order: 2
        }],
        labels: ['January', 'February', 'March', 'April']
    },
    options: options
});