更新图表

在图表创建后更新图表是很常见的。当图表数据或选项发生更改时，Chart.js 会动画到新的数据值和选项。

添加或移除数据

通过更改数据数组来支持添加和移除数据。要添加数据，只需将数据添加到数据数组中，如本示例所示，要移除数据，可以再次弹出它。

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

更新选项

要更新选项，支持就地修改 options 属性或传入新的选项对象。

• 如果就地修改选项，其他选项属性将被保留，包括 Chart.js 计算的那些属性。
• 如果创建为一个新对象，它将类似于使用这些选项创建新图表 - 旧选项将被丢弃。

function updateConfigByMutating(chart) {
    chart.options.plugins.title.text = 'new title';
    chart.update();
}
function updateConfigAsNewObject(chart) {
    chart.options = {
        responsive: true,
        plugins: {
            title: {
                display: true,
                text: 'Chart.js'
            }
        },
        scales: {
            x: {
                display: true
            },
            y: {
                display: true
            }
        }
    };
    chart.update();
}

可以在不更改其他选项的情况下单独更新比例尺。要更新比例尺，请传入一个包含所有自定义选项的对象，包括未更改的选项。

在使用新的 id 或更改的 type 更新比例尺后，引用 chart.scales 中任何一个的变量将丢失。

function updateScales(chart) {
    let xScale = chart.scales.x;
    let yScale = chart.scales.y;
    chart.options.scales = {
        newId: {
            display: true
        },
        y: {
            display: true,
            type: 'logarithmic'
        }
    };
    chart.update();
    // need to update the reference
    xScale = chart.scales.newId;
    yScale = chart.scales.y;
}

您也可以通过其 id 更新特定的比例尺。

function updateScale(chart) {
    chart.options.scales.y = {
        type: 'logarithmic'
    };
    chart.update();
}

更新选项的代码示例可以在 line-datasets.html (在新窗口中打开) 中找到。

阻止动画

有时当图表更新时，您可能不希望出现动画。要实现这一点，您可以使用 'none' 作为模式调用 update。

myChart.update('none');