Performance

Chart.jsのチャートはcanvas要素にレンダリングされるため、非常に速く表示されます。 大規模なデータセットを利用する場合や、パフォーマンスを重視するアプリケーションで利用する場合、 以下のヒントを参考にしてください。

Tick Caluculation

Rotaion

minRotationとmaxRotationに同じ回転角度を指定します。 これによりチャートが自動的に回転角度を決める必要がなくなります。

Sampling

ticks.sampleSizeオプションを指定します。 これにより、軸を高速にレンダリングするためにラベルのサブセットのみを見てラベルの大きさを決めることができます。 この設定はラベルサイズが大きく変わることがない場合に最適です。

アニメーションの無効化

チャートのレンダリング時間が長い場合、 アニメーションの無効化をおすすめします。 これは更新時のレンダリングを複数回ではなく、1度だけにすることを意味しています。 これによりCPUの使用量が減り、ページのパフォーマンスが向上します。

アニメーションを無効化するには以下のように指定します。

new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        animation: {
            duration: 0 // アニメーション時間
        },
        hover: {
            animationDuration: 0 // アイテムをホバーした時のアニメーション時間
        },
        responsiveAnimationDuration: 0 // リサイズ後のアニメーション時間
    }
});

データの間引き

一部のデータを間引きすることで、最良の結果を生成することができます。 グラフに表示するデータが多い場合、数百ピクセルの幅のグラフに、 数万点のデータを表示するのは意味がありません。

データの間引きについては多くのアプローチがあり、 間引きアルゴリズムの選択は、データの状態と、どのような結果が欲しいかに依存します。 例えば、min/max間引きアルゴリズムは データのピーク(頂点)を保持しますが、ピクセル毎に最大4ポイント(点)必要になる可能性があります。 この間引きアルゴリズムは、ピークの表示が必要で、データにノイズが多い場合に上手く動きます。

折れ線グラフ

ベジェ曲線の無効化

折れ線グラフを描画する際にベジェ曲線を無効化すると、 ベジェ曲線を利用するよりも直線で描画する方がパフォーマンスが向上するため、 レンダリング時間が短縮されます。

ベジェ曲線を無効化するには以下のように指定します。

new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        elements: {
            line: {
                tension: 0 // ベジェ曲線無効化
            }
        }
    }
});

線描画の無効化

大量のデータポイントがある場合、線の描画を無効化し、 ポイント(点)で描画する方が効果的です。 これは、キャンバスの描画要素が減るため、パフォーマンスの向上することを意味します。

線を無効化するには以下のように指定します。

new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            showLine: false // 指定したデータセットのみ無効化
        }]
    },
    options: {
        showLines: false // すべてのデータセットで無効化
    }
});