# 集成

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)

可用的插件:

可用秤:

# 辅助函数

如果你想使用辅助函数,你需要从辅助包中单独导入它们,并将它们作为独立的函数使用。

将事件转换为数据值 使用打包器的示例。

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, {...});
        });
    });
});