Chart.js 中文网

# 性能

¥Performance

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

¥Chart.js charts are rendered on canvas elements, which makes rendering quite fast. For large datasets or performance sensitive applications, you may wish to consider the tips below.

# 数据结构和格式

¥Data structure and format

# 解析

¥Parsing

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

¥Provide prepared data in the internal format accepted by the dataset and scales, and set parsing: false. See Data structures for more information.

# 数据规范化

¥Data normalization

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

¥Chart.js is fastest if you provide data with indices that are unique, sorted, and consistent across datasets and provide the normalized: true option to let Chart.js know that you have done so. Even without this option, it can sometimes still be faster to provide sorted data.

# 抽取

¥Decimation

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

¥Decimating your data will achieve the best results. When there is a lot of data to display on the graph, it doesn't make sense to show tens of thousands of data points on a graph that is only a few hundred pixels wide.

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

¥The decimation plugin can be used with line charts to decimate data before the chart is rendered. This will provide the best performance since it will reduce the memory needed to render the chart.

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

¥Line charts are able to do automatic data decimation during draw, when certain conditions are met. You should still consider decimating data yourself before passing it in for maximum performance since the automatic decimation occurs late in the chart life cycle.

# 刻度计算

¥Tick Calculation

# 回转

¥Rotation

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

¥Specify a rotation value by setting minRotation and maxRotation to the same value, which avoids the chart from having to automatically determine a value to use.

# 采样

¥Sampling

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

¥Set the ticks.sampleSize option. This will determine how large your labels are by looking at only a subset of them in order to render axes more quickly. This works best if there is not a large variance in the size of your labels.

# 禁用动画

¥Disable Animations

如果你的图表渲染时间较长，则最好禁用动画。这样做意味着图表只需要在更新期间渲染一次而不是多次。这将具有降低 CPU 使用率和提高一般页面性能的效果。当禁用动画且 Path2D 可用时，折线图使用 Path2D 缓存。

¥If your charts have long render times, it is a good idea to disable animations. Doing so will mean that the chart needs to only be rendered once during an update instead of multiple times. This will have the effect of reducing CPU usage and improving general page performance. Line charts use Path2D caching when animations are disabled and Path2D is available.

禁用动画

¥To disable animations

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

# 为比例指定 min 和 max

¥Specify min and max for scales

如果你指定 min 和 max，则秤不必根据数据计算范围。

¥If you specify the min and max, the scale does not have to compute the range from the data.

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）

¥Parallel rendering with web workers (Chromium only)

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

¥Chromium (Chrome: version 69, Edge: 79, Opera: 56) added the ability to transfer rendering control of a canvas (opens new window) to a web worker. Web workers can use the OffscreenCanvas API (opens new window) to render from a web worker onto canvases in the DOM. Chart.js is a canvas-based library and supports rendering in a web worker - just pass an OffscreenCanvas into the Chart constructor instead of a Canvas element. Note that as of today, this API is only supported in Chromium based browsers.

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

¥By moving all Chart.js calculations onto a separate thread, the main thread can be freed up for other uses. Some tips and tricks when using Chart.js in a web worker:

  • 在线程之间传输数据可能代价高昂，因此请确保你的配置和数据对象尽可能小。如果可以，请尝试在工作线程端生成它们（工作线程可以发送 HTTP 请求！）或将它们作为 ArrayBuffers 传递给你的工作线程，这可以从一个线程快速传输到另一个线程。

    ¥Transferring data between threads can be expensive, so ensure that your config and data objects are as small as possible. Try generating them on the worker side if you can (workers can make HTTP requests!) or passing them to your worker as ArrayBuffers, which can be transferred quickly from one thread to another.

  • 你不能在线程之间传输函数，所以如果你的配置对象包含函数，你必须在传输之前将它们删除，然后再将它们添加回去。

    ¥You can't transfer functions between threads, so if your config object includes functions you'll have to strip them out before transferring and then add them back later.

  • 你无法从工作线程访问 DOM，因此使用 DOM（包括任何鼠标交互）的 Chart.js 插件可能无法工作。

    ¥You can't access the DOM from worker threads, so Chart.js plugins that use the DOM (including any mouse interactions) will likely not work.

  • 如果你支持的浏览器不是最现代的 Chromium 浏览器，请确保你有备用方案。

    ¥Ensure that you have a fallback if you support browsers other than the most modern Chromium browsers.

  • 调整图表大小必须手动完成。请参阅下面的工作线程代码中的示例。

    ¥Resizing the chart must be done manually. See an example in the worker code below.

示例主线程代码：

¥Example main thread code:

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

工作线程代码示例，在 worker.js 中：

¥Example worker code, in 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();
};

# 折线图

¥Line Charts

# 禁用贝塞尔曲线

¥Leave Bézier curves disabled

如果你在图表上绘制线条，禁用贝塞尔曲线将缩短渲染时间，因为绘制直线比贝塞尔曲线更高效。默认情况下禁用贝塞尔曲线。

¥If you are drawing lines on your chart, disabling Bézier curves will improve render times since drawing a straight line is more performant than a Bézier curve. Bézier curves are disabled by default.

# 绘制期间自动数据抽取

¥Automatic data decimation during draw

当 tension、stepped 和 borderDash 保留设置为其默认值（分别为 false、0 和 []）时，线路元素将自动抽取数据。这通过跳过不可见线段的绘制来提高渲染速度。

¥Line element will automatically decimate data, when tension, stepped, and borderDash are left set to their default values (false, 0, and [] respectively). This improves rendering speed by skipping drawing of invisible line segments.

# 启用 spanGaps

¥Enable spanGaps

如果你有很多数据点，启用 spanGaps 可以提高性能。这会禁用线的分段，这可能是一个不需要的步骤。

¥If you have a lot of data points, it can be more performant to enable spanGaps. This disables segmentation of the line, which can be an unneeded step.

要启用 spanGaps：

¥To enable spanGaps:

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

# 禁用画线

¥Disable Line Drawing

如果你有很多数据点，则禁用数据集线的渲染并仅绘制点可能会提高性能。这样做意味着可以减少在画布上绘制的内容，从而提高渲染性能。

¥If you have a lot of data points, it can be more performant to disable rendering of the line for a dataset and only draw points. Doing this means that there is less to draw on the canvas which will improve render performance.

禁用线路：

¥To disable lines:

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

# 禁用点绘图

¥Disable Point Drawing

如果你有很多数据点，则禁用数据集的点渲染并仅画线可能会提高性能。这样做意味着可以减少在画布上绘制的内容，从而提高渲染性能。

¥If you have a lot of data points, it can be more performant to disable rendering of the points for a dataset and only draw line. Doing this means that there is less to draw on the canvas which will improve render performance.

要禁用点绘制：

¥To disable point drawing:

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 模式

¥When transpiling with Babel, consider using loose mode

Babel 7.9 改变了类的构建方式。它很慢，除非与 loose 模式一起使用。更多信息 (opens new window)

¥Babel 7.9 changed the way classes are constructed. It is slow, unless used with loose mode. More information (opens new window)