集成

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.

If you're using a front-end framework (e.g., React, Angular, or Vue), please see available integrations .

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

### Bundlers (Webpack, Rollup, etc.)
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
If you don't care about the bundle size, you can use the auto package ensuring all features are available:

```javascript
import Chart from 'chart.js/auto';
```

#### Bundle optimization
When optimizing the bundle, you need to import and register the components that are needed in your application.

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`
  - Default scales: `CategoryScale` (x), `LinearScale` (y)
- Bubble chart
  - `BubbleController`
  - `PointElement`
  - Default scales: `LinearScale` (x/y)
- Doughnut chart
  - `DoughnutController`
  - `ArcElement`
  - Not using scales
- Line chart
  - `LineController`
  - `LineElement`
  - `PointElement`
  - Default scales: `CategoryScale` (x), `LinearScale` (y)
- Pie chart
  - `PieController`
  - `ArcElement`
  - Not using scales
- PolarArea chart
  - `PolarAreaController`
  - `ArcElement`
  - Default scale: `RadialLinearScale` (r)
- Radar chart
  - `RadarController`
  - `LineElement`
  - `PointElement`
  - Default scale: `RadialLinearScale` (r)
- Scatter chart
  - `ScatterController`
  - `PointElement`
  - Default scales: `LinearScale` (x/y)

Available plugins:

- Decimation
- `Filler` - used to fill area described by LineElement, see Area charts
- Legend
- SubTitle
- Title
- Tooltip

Available scales:

- Cartesian scales (x/y)

- CategoryScale
  - LinearScale
  - LogarithmicScale
  - TimeScale
  - TimeSeriesScale

- 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.

```javascript
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
Because Chart.js is an ESM library, in CommonJS modules you should use a dynamic import:

```javascript
const { Chart } = await import('chart.js');
```

### RequireJS
Important: RequireJS can load only AMD modules , so be sure to require one of the UMD builds instead (i.e. `dist/chart.umd.js`).

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

> Note
In order to use the time scale, you need to make sure one of the available date adapters and corresponding date library are fully loaded after requiring Chart.js. For this you can use nested requires:
```javascript
require(['chartjs'], function(Chart) {
    require(['moment'], function() {
        require(['chartjs-adapter-moment'], function() {
            new Chart(ctx, {...});
        });
    });
});
```