集成

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:

• Decimation
• Filler - 用于填充 LineElement 描述的区域，见 面积图
• Legend
• SubTitle
• Title
• Tooltip

可用秤：

英Available scales:

• 笛卡尔尺度 (x/y)

  • CategoryScale
  • LinearScale
  • LogarithmicScale
  • TimeScale
  • TimeSeriesScale

• 径向刻度 (r)

  • RadialLinearScale

辅助函数

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

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