# 性能

Chart.js 图表在 canvas 元素上渲染，这使得渲染非常快。对于大型数据集或对性能敏感的应用，你可能希望考虑以下提示。

# 数据结构和格式

# 解析

以数据集和尺度接受的内部格式提供准备好的数据，并设置 parsing: false。有关详细信息，请参阅数据结构。

# 数据规范化

如果你为数据提供的索引在数据集中是唯一的、排序的和一致的，并且提供 normalized: true 选项让 Chart.js 知道你已经这样做了，那么 Chart.js 是最快的。即使没有这个选项，有时提供排序数据仍然可以更快。

# 抽取

抽取数据将获得最佳结果。当需要在图表上显示大量数据时，在只有几百个像素宽的图表上显示数万个数据点是没有意义的。

抽取插件可与折线图一起使用，以在渲染图表之前抽取数据。这将提供最佳性能，因为它将减少渲染图表所需的内存。

当满足某些条件时，折线图可以执行绘制期间自动数据抽取。你仍然应该考虑在传递数据之前自行抽取数据以获得最佳性能，因为自动抽取发生在图表生命周期的后期。

# 刻度计算

# 回转

指定旋转值通过将 minRotation 和 maxRotation 设置为相同的值，这避免了图表必须自动确定要使用的值。

# 采样

设置 ticks.sampleSize 选项。这将通过仅查看标签的一个子集来确定标签的大小，以便更快地渲染轴。如果标签的大小差异不大，则此方法效果最佳。

# 禁用动画

如果你的图表渲染时间较长，则最好禁用动画。这样做意味着图表只需要在更新期间渲染一次而不是多次。这将具有降低 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 worker 进行并行渲染（仅限 Chromium）

Chromium（Chrome：版本 69，Edge：79，Opera：56）为网络工作者添加了转移画布的渲染控制 (opens new window) 的能力。 Web worker 可以使用 OffscreenCanvas API (opens new window) 从 web worker 渲染到 DOM 中的画布上。 Chart.js 是一个基于画布的库，支持在 web worker 中渲染 - 只需将 OffscreenCanvas 传递到 Chart 构造函数而不是 Canvas 元素。请注意，截至目前，此 API 仅在基于 Chromium 的浏览器中受支持。

通过将所有 Chart.js 计算移动到一个单独的线程上，主线程可以腾出空间用于其他用途。在 Web Worker 中使用 Chart.js 时的一些提示和技巧：

在线程之间传输数据可能代价高昂，因此请确保你的配置和数据对象尽可能小。如果可以，请尝试在工作线程端生成它们（工作线程可以发送 HTTP 请求！）或将它们作为 ArrayBuffers 传递给你的工作线程，这可以从一个线程快速传输到另一个线程。
你不能在线程之间传输函数，所以如果你的配置对象包含函数，你必须在传输之前将它们删除，然后再将它们添加回去。
你无法从工作线程访问 DOM，因此使用 DOM（包括任何鼠标交互）的 Chart.js 插件可能无法工作。
如果你支持的浏览器不是最现代的 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 模式一起使用。更多信息 (opens new window)