集成

¥Integration

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 Tag

<script src="path/to/chartjs/dist/chart.umd.js"></script>
<script>
    const myChart = new Chart(ctx, {...});
</script>

打包器（Webpack、Rollup 等）

¥Bundlers (Webpack, Rollup, etc.)

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.

快速开始

¥Quick start

如果你不关心包的大小，你可以使用 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 optimization

在优化 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)):

• 柱状图

  ¥Bar chart

  • BarController

  • BarElement

  • 默认比例：CategoryScale (x), LinearScale (y)

    ¥Default scales: CategoryScale (x), LinearScale (y)

• 气泡图

  ¥Bubble chart

  • BubbleController

  • PointElement

  • 默认比例：LinearScale(x/y)

    ¥Default scales: LinearScale (x/y)

• 环形图

  ¥Doughnut chart

  • DoughnutController

  • ArcElement

  • 不使用体重秤

    ¥Not using scales

• 折线图

  ¥Line chart

  • LineController

  • LineElement

  • PointElement

  • 默认比例：CategoryScale (x), LinearScale (y)

    ¥Default scales: CategoryScale (x), LinearScale (y)

• 饼形图

  ¥Pie chart

  • PieController

  • ArcElement

  • 不使用体重秤

    ¥Not using scales

• 极地面积图

  ¥PolarArea chart

  • PolarAreaController

  • ArcElement

  • 默认比例：RadialLinearScale(r)

    ¥Default scale: RadialLinearScale (r)

• 雷达图

  ¥Radar chart

  • RadarController

  • LineElement

  • PointElement

  • 默认比例：RadialLinearScale(r)

    ¥Default scale: RadialLinearScale (r)

• 散点图

  ¥Scatter chart

  • ScatterController

  • PointElement

  • 默认比例：LinearScale(x/y)

    ¥Default scales: LinearScale (x/y)

可用的插件：

¥Available plugins:

• Decimation

• Filler - 用于填充 LineElement 描述的区域，见 面积图

  ¥Filler - used to fill area described by LineElement, see Area charts

• Legend

• SubTitle

• Title

• Tooltip

可用秤：

¥Available scales:

• 笛卡尔尺度 (x/y)

  ¥Cartesian scales (x/y)

  • CategoryScale

  • LinearScale

  • LogarithmicScale

  • TimeScale

  • TimeSeriesScale

• 径向刻度 (r)

  ¥Radial scales (r)

  • RadialLinearScale

辅助函数

¥Helper functions

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

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

注意

为了使用时间刻度，你需要在调用 Chart.js 后确保 可用的日期适配器之一 (opens new window) 和相应的日期库已完全加载。为此，你可以使用嵌套要求：

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