チャートの更新

作成済みのチャートを更新したいことはよくあります。チャートのデータまたはオプションが変更されると、Chart.jsは新しいデータ値とオプションにアニメーションで遷移します。

データの追加または削除

データ配列を変更することで、データの追加と削除がサポートされています。データを追加するには、この例のようにデータ配列にデータを追加するだけです。削除するには、popメソッドを使用します。

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();
}

他のオプションを変更せずに、スケールを個別に更新できます。スケールを更新するには、変更されていないものも含め、すべてのカスタマイズを含むオブジェクトを渡します。

chart.scalesからのいずれかの参照変数は、新しいidまたは変更されたtypeを使用してスケールを更新した後に失われます。

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');