차트 업데이트

차트를 만든 후 업데이트하는 것은 매우 흔한 경우입니다. 차트 데이터 또는 옵션을 변경할 때 Chart.js는 새로운 데이터 값과 옵션을 애니메이션합니다.

데이터 추가 또는 삭제

데이터 추가와 삭제는 데이터 배열을 변경하는 것으로 지원됩니다. 데이터를 추가하려면 이 예제와 같이 데이터배열에 데이터를 추가해주면 됩니다.

function addData(chart, label, data) {
    chart.data.labels.push(label);
    chart.data.datasets.forEach((dataset) => {
        dataset.data.push(data);
    });
    chart.update();
}

function removeData(chart) {
    chart.data.labels.pop();
    chart.data.datasets.forEach((dataset) => {
        dataset.data.pop();
    });
    chart.update();
}

업데이트 옵션

옵션을 업데이트하려면 옵션 속성을 변경하거나 새 옵션 객체를 전달하는 것으로 지원됩니다.

• 만약 옵션이 그 자리에서 변경되었다면 Chart.js에 의해 계산되어 포함된 다른 옵션 속성은 보전됩니다.
• 만약 새로운 객체를 생성한다면 옵션과 함께 새로운 차트를 만드는 것과 같습니다 - 이전 옵션은 폐기됩니다.

function updateConfigByMutating(chart) {
    chart.options.title.text = 'new title';
    chart.update();
}

function updateConfigAsNewObject(chart) {
    chart.options = {
        responsive: true,
        title: {
            display: true,
            text: 'Chart.js'
        },
        scales: {
            xAxes: [{
                display: true
            }],
            yAxes: [{
                display: true
            }]
        }
    };
    chart.update();
}

스케일은 다른 옵션의 변화 없이 분리되어 업데이트될 수 있습니다. 스케일을 업데이트하려면 변경되지 않은 사용자 정의를 포함하여 모든 객체를 전달해야 합니다.

새 id 또는 변경된 tyep으로 스케일을 업데이트 한 후 chart.scales에서 하나를 참조하는 변수가 손실됩니다.

function updateScales(chart) {
    var xScale = chart.scales['x-axis-0'];
    var yScale = chart.scales['y-axis-0'];
    chart.options.scales = {
        xAxes: [{
            id: 'newId',
            display: true
        }],
        yAxes: [{
            display: true,
            type: 'logarithmic'
        }]
    };
    chart.update();
    // 참조를 업데이트해야합니다
    xScale = chart.scales['newId'];
    yScale = chart.scales['y-axis-0'];
}

인데스 또는 아이디를 지정하여 특정 스케일을 업데이트할 수도 있습니다.

function updateScale(chart) {
    chart.options.scales.yAxes[0] = {
        type: 'logarithmic'
    };
    chart.update();
}

업데이트 옵션에 대한 코드 샘플은 toggle-scale-type.html에서 찾을 수 있습니다.

애니메이션 방지

간혹 차트가 업데이트될 때 애니메이션을 원하지 않을 수 있습니다. 이것을 이루기 위해 0의 duration을 가진 update를 호출할 수 있습니다. 애니메이션 없이 차트를 동기적으로 그립니다.