本文介绍如何复用单个极坐标柱状图实例，通过 javascript 动态更新数据系列实现多层阶段式布局（stage-based layout），避免重复创建图表，提升性能与可维护性。

在 AnyChart 中，无需为每组数据创建独立图表实例，即可实现类似“多层舞台切换”的交互效果——这正是问题中所期望的 stage-based layout。核心思路是：仅初始化一次 anychart.polar() 图表，并通过 .data() 方法动态替换各柱状图系列（columnSeries）的数据源。这种方式不仅节省内存、加快渲染，还确保样式、坐标轴、图例等配置全局一致，便于统一维护。

✅ 正确实践：单图表 + 多数据源切换

首先，将不同年份/维度的数据定义为独立变量，提高可读性与复用性：

// 预定义多组数据（支持后续扩展或 API 动态加载）
const actualData1 = [
  { x: 'Aaaaaa', value: 5.2 },
  { x: 'Bbbbbb', value: 5.0 },
  { x: 'Cccccc', value: 5.6 },
  { x: 'Dddddd', value: 4.4 },
  { x: 'Eeeeee', value: 4.9 },
  { x: 'Ffffff', value: 3.9 }
];

const actualData2 = [
  { x: 'Aaaaaa', value: 4.0 },
  { x: 'Bbbbbb', value: 4.3 },
  { x: 'Cccccc', value: 5.2 },
  { x: 'Dddddd', value: 3.7 },
  { x: 'Eeeeee', value: 4.6 },
  { x: 'Ffffff', value: 3.9 }
];

const actualData3 = [
  { x: 'Aaaaaa', value: 4.4 },
  { x: 'Bbbbbb', value: 4.2 },
  { x: 'Cccccc', value: 5.0 },
  { x: 'Dddddd', value: 3.5 },
  { x: 'Eeeeee', value: 4.0 },
  { x: 'Ffffff', value: 0.0 }
];

接着，在图表初始化时绑定这些数据，并保留对系列对象的引用：

var chart = anychart.polar();
var columnSeries1 = chart.column(actualData1).name('2025');
var columnSeries2 = chart.column(actualData2).name('2018');
var columnSeries3 = chart.column(actualData3).name('2015');

// ⚠️ 注意：此处不调用 chart.draw()，留待数据就绪后统一绘制

? 实现按钮驱动的数据切换

关键在于为每个按钮绑定事件处理器，重置系列数据并触发重绘：

function loadSummary() {
  columnSeries1.data(actualData1);
  columnSeries2.data(actualData2);
  columnSeries3.data(actualData3);
  chart.title().text("Overall summary");
  chart.draw(); // 仅需一次 draw() 即可刷新全部系列
}

function loadAAA() {
  columnSeries1.data([
    { x: 'Aaaaaa', value: 6.1 },
    { x: 'Bbbbbb', value: 5.8 },
    { x: 'Cccccc', value: 6.0 },
    { x: 'Dddddd', value: 5.2 },
    { x: 'Eeeeee', value: 5.7 },
    { x: 'Ffffff', value: 4.5 }
  ]);
  columnSeries2.data([
    { x: 'Aaaaaa', value: 5.0 },
    { x: 'Bbbbbb', value: 4.9 },
    { x: 'Cccccc', value: 5.3 },
    { x: 'Dddddd', value: 4.1 },
    { x: 'Eeeeee', value: 4.8 },
    { x: 'Ffffff', value: 4.0 }
  ]);
  columnSeries3.data([
    { x: 'Aaaaaa', value: 4.8 },
    { x: 'Bbbbbb', value: 4.6 },
    { x: 'Cccccc', value: 5.1 },
    { x: 'Dddddd', value: 3.9 },
    { x: 'Eeeeee', value: 4.4 },
    { x: 'Ffffff', value: 3.7 }
  ]);
  chart.title().text("AAAAA Assessment");
  chart.draw();
}

// 同理定义 loadBBB()、loadCCC()

最后，推荐使用 addEventListener 绑定按钮事件（而非 HTML onclick），确保 DOM 加载完成后再注册监听器，并增强代码组织性：

anychart.onDocumentReady(function () {
  // ... 图表初始化代码（含 series 定义）

  // 渲染初始视图
  chart.container('container').draw();

  // 绑定按钮事件（假设按钮 id 分别为 "overall", "aaa", "bbb", "ccc"）
  document.getElementById("overall").addEventListener("click", loadSummary);
  document.getElementById("aaa").addEventListener("click", loadAAA);
  document.getElementById("bbb").addEventListener("click", loadBBB);
  document.getElementById("ccc").addEventListener("click", loadCCC);
});

对应 HTML 按钮需补充 id 属性：

Overall summary
AAAAA
BBBBB
CCCCC

? 注意事项与最佳实践

• 避免重复 chart.draw()：每次数据更新后调用一次即可，多次调用无益且可能引发闪烁；
• 保持数据结构一致性：所有数据数组必须具有相同的 x 字段（如 'Aaaaaa'），否则极坐标轴排序与对齐会异常；
• 异步数据加载支持：若数据来自 API，可在 fetch().then() 中调用 .data() 并 .draw()，AnyChart 完全兼容 Promise 流程；
• 性能优化提示：对于高频切换场景，可启用 chart.invalidate() 替代 draw()，仅重绘变更部分（需结合 chart.listen('dataChange') 使用）；
• 图例与样式同步：因复用同一图表实例，图例项名称、颜色、字体等均自动继承，无需重复设置。

通过上述方式，你就能以轻量、专业、可扩展的方式，在单一极坐标柱状图容器中实现多阶段数据视图切换——真正践行了“一个图表，无限可能”的可视化设计哲学。