# 整合
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 外掛程式。但是每種類型的圖表都有其自己的基本最低需求（通常該類型的控制器、該控制器和數值使用的元素）
- 長條圖
長條圖控制器長條圖元素- 預設數值：
類別數值（x），線性數值（y）
- 氣泡圖
氣泡圖控制器點元素- 預設數值：
線性數值（x/y）
- 甜甜圈圖
甜甜圈圖控制器弧元素- 不使用數值
- 折線圖
折線圖控制器折線圖元素點元素- 預設數值：
類別數值（x），線性數值（y）
- 圓餅圖
圓餅圖控制器弧元素- 不使用數值
- 極面積圖
極面積圖控制器弧元素- 預設數值：
徑向線性數值（r）
- 雷達圖
雷達圖控制器折線圖元素點元素- 預設數值：
徑向線性數值（r）
- 散佈圖
散佈圖控制器點元素- 預設數值：
線性數值（x/y）
可用外掛程式
可用數值
# 輔助函式
如果您要使用輔助函式，您需要從輔助套件中將它們獨立匯入，並將它們當作獨立函式使用。
使用套件管理程式將 事件轉換為資料值 的範例。
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(['chartjs'], function(Chart) {
require(['moment'], function() {
require(['chartjs-adapter-moment'], function() {
new Chart(ctx, {...});
});
});
});