集成

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)

可用的插件：

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

可用秤：

• 笛卡尔尺度 (x/y)

  • CategoryScale
  • LinearScale
  • LogarithmicScale
  • TimeScale
  • TimeSeriesScale

• 径向刻度 (r)

  • RadialLinearScale

辅助函数

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

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

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