# 集成
Chart.js 可以与纯 JavaScript 或不同的模块加载器集成。 下面的示例展示了如何在不同的系统中加载 Chart.js。
如果你使用的是前端框架(例如 React、Angular 或 Vue),请参阅 可用的集成 (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 的,因此有必要导入并注册你将要使用的控制器、元素、比例尺和插件。
# 快速开始
如果你不关心包的大小,你可以使用 auto
包确保所有功能都可用:
import Chart from 'chart.js/auto';
# 打包优化
在优化 bundle 时,你需要导入并注册应用所需的组件。
这些选项分为控制器、元素、插件、比例。 你可以挑选其中的许多,例如 如果你不打算使用工具提示,请不要导入和注册 Tooltip
插件。 但是每种类型的图表都有自己的最低要求(通常是类型的控制器、该控制器使用的元素和比例尺):
- 柱状图
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)
可用的插件:
可用秤:
笛卡尔尺度 (x/y)
径向刻度 (r)
# 辅助函数
如果你想使用辅助函数,你需要从辅助包中单独导入它们,并将它们作为独立的函数使用。
将事件转换为数据值 使用打包器的示例。
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
:
const { Chart } = await import('chart.js');
# RequireJS
重要: RequireJS 只能加载 AMD 模块 (opens new window),因此请确保改为需要其中一个 UMD 构建(即 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。 为此,你可以使用嵌套要求:
require(['chartjs'], function(Chart) {
require(['moment'], function() {
require(['chartjs-adapter-moment'], function() {
new Chart(ctx, {...});
});
});
});