本文详解 AmCharts 5 中创建多个图表的正确方法：必须为每个图表分配唯一 DOM ID 并分别调用 am5.Root.new(id)，同时确保 am5.ready() 包裹每次初始化，避免根实例冲突与异步渲染问题。
本文详解 amcharts 5 中创建多个图表的正确方法：必须为每个图表分配唯一 dom id 并分别调用 `am5.root.new(id)`，同时确保 `am5.ready()` 包裹每次初始化，避免根实例冲突与异步渲染问题。
在 AmCharts 5 中，每个图表都依赖一个独立的 Root 实例，而该实例必须绑定到页面中唯一且已存在的 DOM 元素（如 <div id="chartdiv">）。常见错误是复用同一 <code>id、未等待 DOM 就绪即初始化，或误以为只需修改函数参数就能自动适配多个容器——实际上，am5.Root.new(id) 每次都会创建全新根环境，但前提是 id 对应的元素存在且未被其他 Root 占用。
✅ 正确做法是：
- 为每个图表准备语义清晰、互不重复的 ID（如
chartdiv,chartdiv2,sales-chart）； - 每个图表初始化必须包裹在独立的
am5.ready()回调中（或共用一个am5.ready()内顺序调用），确保 DOM 已加载完成； - 数据中的
value字段必须为数字类型（如8），不可传字符串（如"{{ vit }}"），否则会导致系列渲染失败或静默报错。
以下是一个完整、可运行的双饼图示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Multiple AmCharts 5 Charts</title>
<style>
.chart-container { width: 100%; height: 250px; margin-bottom: 20px; }
</style>
</head>
<body>
<div id="chartdiv" class="chart-container"></div>
<div id="chartdiv2" class="chart-container"></div>
<!-- 加载 AmCharts 5 核心及模块 -->
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/percent.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
<script>
function createChart(id, data) {
// ✅ 关键：每个图表使用独立的 Root 实例，绑定到指定 ID
const root = am5.Root.new(id);
root.setThemes([am5themes_Animated.new(root)]);
const chart = root.container.children.push(
am5percent.PieChart.new(root, { layout: root.verticalLayout })
);
const series = chart.series.push(
am5percent.PieSeries.new(root, {
valueField: "value",
categoryField: "category"
})
);
// 美化配置（省略重复说明）
series.slices.template.setAll({
fillOpacity: 1,
stroke: am5.color(0x000000),
strokeWidth: 1
});
series.get("colors").set("colors", [
am5.color(0xa02a89),
am5.color(0x6a1c71)
]);
series.slices.template.set("toggleKey", "none");
series.ticks.template.set("visible", false);
series.labels.template.set("forceHidden", true);
// ✅ 确保 data.value 是 number 类型
series.data.setAll(data);
series.appear(1000, 100);
}
// 示例数据：务必使用数字，而非模板字符串
const dataGraphic = [
{ value: 8, category: "Vitórias" },
{ value: 12, category: "Derrotas" }
];
// ✅ 为每个图表单独调用 am5.ready —— 推荐方式（清晰、隔离）
am5.ready(() => createChart("chartdiv", dataGraphic));
am5.ready(() => createChart("chartdiv2", [
{ value: 15, category: "Aprovados" },
{ value: 5, category: "Reprovados" }
]));
</script>
</body>
</html>⚠️ 注意事项：
-
禁止复用 Root 实例：不要将同一个
root变量用于多个图表，否则后创建的图表会覆盖前者的容器绑定； -
ID 必须唯一且存在：若
id对应元素不存在，am5.Root.new()会抛出Error: Element not found； -
服务端模板需预编译：若使用
{{ vit }}等模板语法，请确保在 HTML 输出前已被后端（如 Django/Jinja）或构建工具解析为数字，否则传入的是字符串，导致valueField解析失败； -
性能提示：大量图表时，建议在
am5.ready()外统一加载脚本，并考虑按需初始化（如滚动进入视区时）以优化首屏性能。
通过严格遵循“一图一 Root、一图一 ID、数据强类型、就绪再渲染”四原则，即可稳定实现单页多图布局，为数据分析类项目提供灵活可靠的可视化支持。
