集成

Chart.js 可以与纯 JavaScript 或不同的模块加载器集成。以下示例展示了如何在不同系统中加载 Chart.js。

如果您正在使用前端框架（例如 React、Angular 或 Vue），请参阅 可用的集成 (在新窗口中打开).

脚本标签

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

捆绑器（Webpack、Rollup 等）

Chart.js 是树摇可摇的，因此有必要导入并注册您将使用的控制器、元素、刻度和插件。

快速入门

如果您不关心捆绑包大小，可以使用 auto 包，确保所有功能都可用

import Chart from 'chart.js/auto';

捆绑包优化

在优化捆绑包时，您需要导入并注册应用程序中需要的组件。

这些选项分为控制器、元素、插件、刻度。您可以选择其中许多，例如，如果您不打算使用工具提示，请不要导入并注册 Tooltip 插件。但是，每种类型的图表都有自己的最低要求（通常是该类型的控制器、该控制器使用的元素（s）和刻度（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)

可用的插件

• 抽取
• Filler - 用于填充 LineElement 描述的区域，请参阅 区域图表
• 图例
• 副标题
• 标题
• 工具提示

可用的刻度

• 笛卡尔坐标系刻度 (x/y)

  • CategoryScale
  • LinearScale
  • LogarithmicScale
  • TimeScale
  • TimeSeriesScale

• 径向刻度 (r)

  • RadialLinearScale

辅助函数

如果您想使用辅助函数，则需要从 helpers 包中单独导入这些函数，并将其用作独立函数。

使用捆绑器进行 将事件转换为数据值 的示例。

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 模块 (在新窗口中打开)，因此请确保要求使用 UMD 版本之一（例如 dist/chart.umd.js）。

require(['path/to/chartjs/dist/chart.umd.js'], function(Chart){
    const myChart = new Chart(ctx, {...});
});

注意

为了使用时间刻度，您需要确保 可用的日期适配器之一 (在新窗口中打开) 和相应的日期库已完全加载，在加载 Chart.js 之后。为此，您可以使用嵌套的 require

require(['chartjs'], function(Chart) {
    require(['moment'], function() {
        require(['chartjs-adapter-moment'], function() {
            new Chart(ctx, {...});
        });
    });
});