Update

通常、チャートを生成した後に、更新したいと思うかもしれません。 Chart.jsでは、チャートデータを変更すると、新しいデータでアニメーションします。

データの追加・削除

data配列を変更することで、データの追加・削除をサポートしています。 データを追加するには、以下のように指定します。

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

オプションの更新

オプションを更新するには、 optionsプロパティを渡すか、設定しなおすことで更新することができます。

• オプションが変更された場合、 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();
}

スケールは他のオプションを変更せずに更新することができます。 スケールを更新するには、 変更しないオプションを含む全てのカスタマイズを持つオブジェクトを渡します。

chart.scales内のいずれかの変数は、 新しいidまたは変更されたtypeで更新すると失われます。

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'];
}

インデックスやidを指定して特定のスケールを更新することもできます。

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

オプションを更新するためのサンプルコードはこちらです。

アニメーションの無効化

チャートの更新時に、アニメーションは不要な場合があります。 その場合、durationを0にしてupdateを呼び出します。 これでチャートはアニメーション無しでレンダリングされます。