# 集成
Chart.js 可以与纯 JavaScript 或不同的模块加载器集成。 下面的示例展示了如何在不同的系统中加载 Chart.js。
英Chart.js can be integrated with plain JavaScript or with different module loaders. The examples below show how to load Chart.js in different systems.
如果你使用的是前端框架(例如 React、Angular 或 Vue),请参阅 可用的集成 (opens new window)。
英If you're using a front-end framework (e.g., React, Angular, or Vue), please see available integrations (opens new window).
# 脚本标签
<script src="path/to/chartjs/dist/chart.umd.js"></script>
<script>
const myChart = new Chart(ctx, {...});
</script>
# 打包器(Webpack、Rollup 等)
Chart.js 是 tree-shakeable 的,因此有必要导入并注册你将要使用的控制器、元素、比例尺和插件。
英Chart.js is tree-shakeable, so it is necessary to import and register the controllers, elements, scales and plugins you are going to use.
# 快速开始
如果你不关心包的大小,你可以使用 auto
包确保所有功能都可用:
英If you don't care about the bundle size, you can use the auto
package ensuring all features are available:
import Chart from 'chart.js/auto';
# 打包优化
在优化 bundle 时,你需要导入并注册应用所需的组件。
英When optimizing the bundle, you need to import and register the components that are needed in your application.
这些选项分为控制器、元素、插件、比例。 你可以挑选其中的许多,例如 如果你不打算使用工具提示,请不要导入和注册 Tooltip
插件。 但是每种类型的图表都有自己的最低要求(通常是类型的控制器、该控制器使用的元素和比例尺):
英The options are categorized into controllers, elements, plugins, scales. You can pick and choose many of these, e.g. if you are not going to use tooltips, don't import and register the Tooltip
plugin. But each type of chart has its own bare-minimum requirements (typically the type's controller, element(s) used by that controller and scale(s)):
- 柱状图
BarController
BarElement
- 默认比例:
CategoryScale
(x),LinearScale
(y)
- 气泡图
BubbleController
PointElement
- 默认比例:
LinearScale
(x/y)
- 环形图
DoughnutController
ArcElement
- 不使用体重秤
- 折线图
LineController
LineElement
PointElement
- 默认比例:
CategoryScale
(x),LinearScale
(y)
- 饼形图
PieController
ArcElement
- 不使用体重秤
- 极地面积图
PolarAreaController
ArcElement
- 默认比例:
RadialLinearScale
(r)
- 雷达图
RadarController
LineElement
PointElement
- 默认比例:
RadialLinearScale
(r)
- 散点图
ScatterController
PointElement
- 默认比例:
LinearScale
(x/y)
可用的插件:
英Available plugins:
可用秤:
英Available scales:
笛卡尔尺度 (x/y)
径向刻度 (r)
# 辅助函数
如果你想使用辅助函数,你需要从辅助包中单独导入它们,并将它们作为独立的函数使用。
英If you want to use the helper functions, you will need to import these separately from the helpers package and use them as stand-alone functions.
将事件转换为数据值 使用打包器的示例。
英Example of Converting Events to Data Values using bundlers.
import Chart from 'chart.js/auto';
import { getRelativePosition } from 'chart.js/helpers';
const chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
onClick: (e) => {
const canvasPosition = getRelativePosition(e, chart);
// Substitute the appropriate scale IDs
const dataX = chart.scales.x.getValueForPixel(canvasPosition.x);
const dataY = chart.scales.y.getValueForPixel(canvasPosition.y);
}
}
});
# CommonJS
因为 Chart.js 是一个 ESM 库,所以在 CommonJS 模块中你应该使用一个动态的 import
:
英Because Chart.js is an ESM library, in CommonJS modules you should use a dynamic import
:
const { Chart } = await import('chart.js');
# RequireJS
重要: RequireJS 只能加载 AMD 模块 (opens new window),因此请确保改为需要其中一个 UMD 构建(即 dist/chart.umd.js
)。
英Important: RequireJS can load only AMD modules (opens new window), so be sure to require one of the UMD builds instead (i.e. dist/chart.umd.js
).
require(['path/to/chartjs/dist/chart.umd.js'], function(Chart){
const myChart = new Chart(ctx, {...});
});
注意
为了使用时间刻度,你需要确保 可用的日期适配器之一 (opens new window) 和相应的日期库已完全加载 after 需要 Chart.js。 为此,你可以使用嵌套要求:
英In order to use the time scale, you need to make sure one of the available date adapters (opens new window) and corresponding date library are fully loaded after requiring Chart.js. For this you can use nested requires:
require(['chartjs'], function(Chart) {
require(['moment'], function() {
require(['chartjs-adapter-moment'], function() {
new Chart(ctx, {...});
});
});
});