
本文详解如何通过自定义导出菜单项,在 amcharts 4 中实现一键切换原始数据与按周、按月聚合的平均值显示,修正常见配置顺序错误并提供可直接运行的完整方案。
本文详解如何通过自定义导出菜单项,在 amcharts 4 中实现一键切换原始数据与按周、按月聚合的平均值显示,修正常见配置顺序错误并提供可直接运行的完整方案。
在 amCharts 4 中,dateAxis.groupData = true 并非独立开关,而是触发时间轴数据分组的总开关;但其生效前提在于:必须先设置 groupInterval 和 groupFields,再启用 groupData。否则,分组逻辑不会被识别,导致点击菜单后图表无响应——这正是原代码失效的根本原因。
以下是正确、健壮的实现方式(已验证兼容 v4.10.25+):
// 假设已创建 chart、dateAxis 和 lineSeries
chart.exporting.menu = new am4core.ExportMenu();
chart.exporting.menu.align = "right";
chart.exporting.menu.verticalAlign = "top";
chart.exporting.menu.items = [{
"label": "<i class='fa fa-bars'></i>",
"menu": [{
"label": "数据聚合",
"menu": [
{
"type": "custom",
"label": "还原原始数据",
"options": {
"callback": () => {
// 关闭分组并重置系列配置
dateAxis.groupData = false;
lineSeries.groupFields.valueY = undefined;
lineSeries.groupInterval = undefined;
chart.invalidateRawData(); // 强制重绘
}
}
},
{
"type": "custom",
"label": "按周平均",
"options": {
"callback": () => {
// ✅ 正确顺序:先设分组参数,再启用分组
lineSeries.groupFields.valueY = "average";
dateAxis.groupInterval = { timeUnit: "week", count: 1 };
dateAxis.groupData = true;
chart.invalidateRawData();
}
}
},
{
"type": "custom",
"label": "按月平均",
"options": {
"callback": () => {
lineSeries.groupFields.valueY = "average";
dateAxis.groupInterval = { timeUnit: "month", count: 1 };
dateAxis.groupData = true;
chart.invalidateRawData();
}
}
}
]
}]
}];关键注意事项:
- ?
chart.invalidateRawData()是必需调用,用于通知图表重新解析并应用分组逻辑;仅修改属性不会自动刷新视图。 - ?
lineSeries.groupFields是系列级配置,而dateAxis.groupInterval和dateAxis.groupData是轴级配置,三者需协同生效。 - ? 若图表含多个系列,需为每个启用分组的系列单独设置
groupFields;dateAxis.groupData = true仅影响已配置groupInterval的轴。 - ? 时间单位支持
"day"、"week"、"month"、"year"等,count可设为2表示“每两周”,依此类推。
通过此方案,用户可在导出菜单中直观切换分析粒度,无需重新加载数据或编写额外逻辑,显著提升交互体验与数据分析效率。

















