Chart.js 中文网

# Chart.js

欢迎使用 Chart.js！

¥Welcome to Chart.js!

# 为什么选择 Chart.js

¥Why Chart.js

在针对 JavaScript 应用开发者的 许多图表库 (opens new window) 中，根据 GitHub 关注数 (opens new window)（60,000）和 npm 下载量 (opens new window)（每周2,400,000），Chart.js 目前是最受欢迎的。

¥Among many charting libraries (opens new window) for JavaScript application developers, Chart.js is currently the most popular one according to GitHub stars (opens new window) (~60,000) and npm downloads (opens new window) (~2,400,000 weekly).

Chart.js 于 2013 年创建和 发布 (opens new window)，但从那时起已经走了很长一段路。它是开源的，在非常宽松的 MIT license (opens new window) 下获得许可，并由活跃的社区维护。

¥Chart.js was created and announced (opens new window) in 2013 but has come a long way since then. It’s open-source, licensed under the very permissive MIT license (opens new window), and maintained by an active community.

# 特性

¥Features

Chart.js 提供一组常用的图表类型、插件和自定义选项。除了一套合理的 内置图表类型，你还可以使用额外的社区维护的 图表类型 (opens new window)。最重要的是，可以将多种图表类型组合成一个 混合图表（本质上，将多种图表类型混合到同一画布上）。

¥Chart.js provides a set of frequently used chart types, plugins, and customization options. In addition to a reasonable set of built-in chart types, you can use additional community-maintained chart types (opens new window). On top of that, it’s possible to combine several chart types into a mixed chart (essentially, blending multiple chart types into one on the same canvas).

Chart.js 可通过 自定义插件 (opens new window) 高度自定义，以创建注释、缩放或拖放功能等等。

¥Chart.js is highly customizable with custom plugins (opens new window) to create annotations, zoom, or drag-and-drop functionalities to name a few things.

# 默认值

¥Defaults

Chart.js 带有一个合理的默认配置，使得开始使用和获得可用于生产的应用变得非常容易。即使你根本不指定任何选项，你也有可能获得非常吸引人的图表。例如，Chart.js 默认启用动画，因此你可以立即将注意力吸引到你使用数据讲述的故事上。

¥Chart.js comes with a sound default configuration, making it very easy to start with and get an app that is ready for production. Chances are you will get a very appealing chart even if you don’t specify any options at all. For instance, Chart.js has animations turned on by default, so you can instantly bring attention to the story you’re telling with the data.

# 集成

¥Integrations

Chart.js 带有内置的 TypeScript 类型，并与所有流行的 JavaScript 框架 (opens new window) 兼容，包括 React (opens new window)、Vue (opens new window)、Svelte (opens new window) 和 Angular (opens new window)。你可以直接使用 Chart.js 或利用维护良好的封装程序包，以便与你选择的框架进行更原生的集成。

¥Chart.js comes with built-in TypeScript typings and is compatible with all popular JavaScript frameworks (opens new window) including React (opens new window), Vue (opens new window), Svelte (opens new window), and Angular (opens new window). You can use Chart.js directly or leverage well-maintained wrapper packages that allow for a more native integration with your frameworks of choice.

# 开发者经验

¥Developer experience

Chart.js 有非常详尽的文档（是的，你正在阅读它）、API 参考手册 和 示例。维护者和社区成员热切地参与 Discord (opens new window)、GitHub 讨论 (opens new window) 和 Stack Overflow (opens new window) 的对话，其中有超过 11,000 个问题被标记为 chart.js。

¥Chart.js has very thorough documentation (yes, you're reading it), API reference, and examples. Maintainers and community members eagerly engage in conversations on Discord (opens new window), GitHub Discussions (opens new window), and Stack Overflow (opens new window) where more than 11,000 questions are tagged with chart.js.

# 画布渲染

¥Canvas rendering

Chart.js 在 HTML5 画布上渲染图表元素，与其他几个（主要是基于 D3.js 的、渲染为 SVG 的图表库）不同。Canvas 渲染使 Chart.js 非常高效，特别是对于大型数据集和复杂的可视化，否则需要 DOM 树中的数千个 SVG 节点。同时，canvas 渲染不允许使用 CSS 样式，因此你必须为此使用内置选项，或者创建自定义插件或图表类型来根据你的喜好渲染所有内容。

¥Chart.js renders chart elements on an HTML5 canvas unlike several others, mostly D3.js-based, charting libraries that render as SVG. Canvas rendering makes Chart.js very performant, especially for large datasets and complex visualizations that would otherwise require thousands of SVG nodes in the DOM tree. At the same time, canvas rendering disallows CSS styling, so you will have to use built-in options for that, or create a custom plugin or chart type to render everything to your liking.

# 性能

¥Performance

Chart.js 非常适合大型数据集。可以使用内部格式有效地摄取此类数据集，因此你可以跳过数据 解析 和 规范化。或者，数据抽取 可以配置为在渲染之前对数据集进行采样并减小其大小。

¥Chart.js is very well suited for large datasets. Such datasets can be efficiently ingested using the internal format, so you can skip data parsing and normalization. Alternatively, data decimation can be configured to sample the dataset and reduce its size before rendering.

最后，与 SVG 渲染相比，Chart.js 使用的画布渲染减少了 DOM 树的负担。此外，tree-shaking 支持允许你在包中包含最少的 Chart.js 代码部分，从而减少包大小和页面加载时间。

¥In the end, the canvas rendering that Chart.js uses reduces the toll on your DOM tree in comparison to SVG rendering. Also, tree-shaking support allows you to include minimal parts of Chart.js code in your bundle, reducing bundle size and page load time.

# 社区

¥Community

Chart.js 是 活跃开发的 (opens new window)，由社区维护。次要 发布 (opens new window) 大约每两个月发布一次，而主要版本每两年发布一次重大更改，Chart.js 在添加新功能和让跟上它们变得很麻烦之间保持平衡。

¥Chart.js is actively developed (opens new window) and maintained by the community. With minor releases (opens new window) on an approximately bi-monthly basis and major releases with breaking changes every couple of years, Chart.js keeps the balance between adding new features and making it a hassle to keep up with them.