チャートの更新

チャートを作成した後、チャートを更新しようとするのは、至極普通なことです。 チャートのデータやオプションが変更されると、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();
}

オプションの更新

オプションを更新するには、optionsプロパティを変更するか、新しいoptionsオブジェクトを渡すかします。

• オプションが変更された場合は、Chart.jsで計算されたものも含め、変更された部分以外のオプションプロパティは保持されます。
• 新しいoptionsオブジェクトを作成し渡した場合は、そのオプションで新しいグラフを作成します。古いオプションは破棄されます。

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

オプション更新に関するコードサンプルは、toggle-scale-type.htmlにあります。

アニメーションの阻止

チャートが更新されるときに、アニメーションが必要ない場合があります。 そうするには、updateを0のデュレーション時間で呼び出します。 これにより、チャートはアニメーションなしで一気にレンダリングされます。