# パフォーマンス

Chart.jsチャートはcanvas要素にレンダリングされるため、レンダリングが非常に高速です。大規模なデータセットやパフォーマンス重視のアプリケーションでは、以下のヒントを検討することをお勧めします。

# データ構造とフォーマット

# パース

データセットとスケールで受け入れられる内部フォーマットで準備されたデータを提供し、parsing: falseを設定します。詳細はデータ構造を参照してください。

# データの正規化

Chart.jsは、データセット全体で一意で、ソートされ、一貫性のあるインデックスを持つデータを提供し、Chart.jsにそのことを知らせるために`normalized: true`オプションを提供すると、最速になります。このオプションがなくても、ソートされたデータを提供する方が高速になる場合があります。

# 間引き

データを間引くと、最良の結果が得られます。グラフに表示するデータが多い場合、数百ピクセル幅のグラフに数万個のデータポイントを表示するのは意味がありません。

間引きプラグインをラインチャートで使用して、チャートがレンダリングされる前にデータを間引くことができます。これは、チャートのレンダリングに必要なメモリを削減するため、最高のパフォーマンスを提供します。

ラインチャートは、特定の条件が満たされた場合、描画中に自動データ間引きを実行できます。自動間引きはチャートライフサイクルの後半で発生するため、最大のパフォーマンスを得るためには、データを渡す前に自分で間引きすることを検討する必要があります。

# 目盛り計算

# 回転

回転値を指定するには、`minRotation`と`maxRotation`を同じ値に設定します。これにより、チャートが使用する値を自動的に決定する必要がなくなります。

# サンプリング

ticks.sampleSizeオプションを設定します。これは、軸をより迅速にレンダリングするためにラベルのサブセットのみを調べることによって、ラベルのサイズを決定します。これは、ラベルのサイズに大きなばらつきがない場合に最適に機能します。

# アニメーションの無効化

チャートのレンダリング時間が長い場合は、アニメーションを無効にすることをお勧めします。そうすることで、チャートは更新中に複数回ではなく1回だけレンダリングされるようになります。これにより、CPU使用率が削減され、ページのパフォーマンスが全般的に向上します。ラインチャートは、アニメーションが無効になっていてPath2Dが使用可能な場合、Path2Dキャッシュを使用します。

アニメーションを無効にするには

new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        animation: false
    }
});

# スケールに`min`と`max`を指定する

`min`と`max`を指定すると、スケールはデータから範囲を計算する必要がなくなります。

new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        scales: {
            x: {
                type: 'time',
                min: new Date('2019-01-01').valueOf(),
                max: new Date('2019-12-31').valueOf()
            },
            y: {
                type: 'linear',
                min: 0,
                max: 100
            }
        }
    }
});

# Webワーカーによる並列レンダリング（Chromiumのみ）

Chromium（Chrome：バージョン69、Edge：79、Opera：56）では、キャンバスのレンダリング制御をWebワーカーに転送する (新規ウィンドウで開きます)機能が追加されました。Webワーカーは、OffscreenCanvas API (新規ウィンドウで開きます)を使用して、WebワーカーからDOMのキャンバスにレンダリングできます。Chart.jsはキャンバスベースのライブラリであり、Webワーカーでのレンダリングをサポートしています。Canvas要素の代わりにOffscreenCanvasをChartコンストラクターに渡すだけです。現在、このAPIはChromiumベースのブラウザでのみサポートされています。

すべてのChart.jsの計算を別のスレッドに移動することにより、メインスレッドを他の用途に解放できます。WebワーカーでChart.jsを使用する場合のヒントとコツをいくつか紹介します。

スレッド間でのデータ転送はコストがかかる可能性があるため、設定オブジェクトとデータオブジェクトをできるだけ小さくしてください。可能であれば、ワーカー側で生成するか（ワーカーはHTTPリクエストを実行できます！）、スレッド間で迅速に転送できるArrayBufferとしてワーカーに渡してください。
スレッド間で関数を転送することはできないため、設定オブジェクトに関数が含まれている場合は、転送する前にそれらを削除してから、後で追加し直す必要があります。
ワーカースレッドからDOMにアクセスすることはできないため、DOMを使用するChart.jsプラグイン（マウスインタラクションを含む）は likelyに動作しません。
最新のChromiumブラウザ以外のブラウザをサポートする場合は、フォールバックを用意してください。
チャートのサイズ変更は手動で行う必要があります。以下のワーカーコードの例を参照してください。

メインスレッドのコード例

const config = {};
const canvas = new HTMLCanvasElement();
const offscreenCanvas = canvas.transferControlToOffscreen();
const worker = new Worker('worker.js');
worker.postMessage({canvas: offscreenCanvas, config}, [offscreenCanvas]);

ワーカーコードの例（`worker.js`）

onmessage = function(event) {
    const {canvas, config} = event.data;
    const chart = new Chart(canvas, config);
    // Resizing the chart must be done manually, since OffscreenCanvas does not include event listeners.
    canvas.width = 100;
    canvas.height = 100;
    chart.resize();
};

# ラインチャート

# ベジェ曲線を無効のままにする

チャートに線を描画する場合、ベジェ曲線を無効にすると、直線の描画はベジェ曲線よりもパフォーマンスが高いため、レンダリング時間が短縮されます。ベジェ曲線はデフォルトで無効になっています。

# 描画中の自動データ間引き

ライン要素は、`tension`、`stepped`、`borderDash`がデフォルト値（それぞれ`false`、`0`、`[]`）に設定されている場合、データを自動的に間引きます。これにより、見えない線分の描画がスキップされるため、レンダリング速度が向上します。

# spanGapsを有効にする

データポイントが多い場合は、`spanGaps`を有効にする方がパフォーマンスが向上する可能性があります。これは、不要な手順となる可能性のある線のセグメント化を無効にします。

`spanGaps`を有効にするには

new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            spanGaps: true // enable for a single dataset
        }]
    },
    options: {
        spanGaps: true // enable for all datasets
    }
});

# ライン描画の無効化

データポイントが多い場合は、データセットのラインのレンダリングを無効にして、ポイントのみを描画する方がパフォーマンスが向上する可能性があります。これを行うと、キャンバスに描画するものが少なくなり、レンダリングパフォーマンスが向上します。

ラインを無効にするには

new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            showLine: false // disable for a single dataset
        }]
    },
    options: {
        showLine: false // disable for all datasets
    }
});

# ポイント描画の無効化

データポイントが多い場合は、データセットのポイントのレンダリングを無効にして、ラインのみを描画する方がパフォーマンスが向上する可能性があります。これを行うと、キャンバスに描画するものが少なくなり、レンダリングパフォーマンスが向上します。

ポイントの描画を無効にするには

new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            pointRadius: 0 // disable for a single dataset
        }]
    },
    options: {
        datasets: {
            line: {
                pointRadius: 0 // disable for all `'line'` datasets
            }
        },
        elements: {
            point: {
                radius: 0 // default to disabled in all datasets
            }
        }
    }
});

# Babelでトランスパイルする場合、`loose`モードの使用を検討してください

Babel 7.9では、クラスの構築方法が変更されました。 `loose`モードで使用しない限り、速度が遅くなります。詳細情報 (新規ウィンドウで開きます)

← パディング設定 →