amCharts 5部署至生产服务器后Tooltip与图例功能异常

核心问题分析 #

本地运行正常、生产环境出现图例不可点击、Tooltip随机失效，大概率是跨Root实例绑定图例、HTML格式错误或生产环境变量输出异常导致的交互逻辑断裂。

具体修复步骤 #

1. 统一图表与图例的Root实例 #

代码中图例单独创建了PREVS_Legend_Root，但图表依赖的是PREVS_Plot对应的Root实例。amCharts 5的交互事件（图例点击、Tooltip触发）需要依赖同一个Root的事件系统，跨Root会直接导致绑定失效。

修改图例初始化逻辑，复用图表的Root：

// 删除单独创建的Legend Root
// let PREVS_Legend_Root = am5.Root.new("legend_div");

// 直接使用PREVS_Plot的Root创建图例
let PREVS_Legend = PREVS_Plot.container.children.push(
    am5.Legend.new(PREVS_Plot, {
        centerX: am5.p50,
        x: am5.p50,
        layout: am5.GridLayout.new(PREVS_Plot, {
            fixedWidthGrid: true,
            maxColumns: 4,
        })
    })
);

// 若需要将图例挂载到指定的#legend_div中，添加以下代码
PREVS_Legend.domElement.appendChildTo(document.getElementById("legend_div"));

2. 修复Tooltip的HTML格式错误 #

原代码中tooltipHTML的<span>标签未闭合，生产环境浏览器对HTML语法校验更严格，会导致Tooltip渲染失败：

// 原错误代码
tooltipHTML: "<p class='Tooltip_Text' style='color: #3f4444 !important;'><em>{name}</em><br><span class='Practice_Name' style='color: #3f4444 !important;'>Tooltip text & value: {valueX}</p>"

// 修复后（闭合span标签）
tooltipHTML: "<p class='Tooltip_Text' style='color: #3f4444 !important;'><em>{name}</em><br><span class='Practice_Name' style='color: #3f4444 !important;'>Tooltip text & value: {valueX}</span></p>"

3. 验证PHP变量输出的合法性 #

生产环境需确认PHP输出的样式变量是否为合法值：

• $Baseline_Opacity：必须是0-1之间的小数（如0.7），不能是字符串或超出范围的数值
• $Baseline_Stroke_Width：必须是非负整数（如1）
• $Baseline_Font_Size：必须是合法的CSS尺寸（如12或"12px"）

可直接查看生产环境页面源码，确认这些变量的输出结果是否符合预期。

4. 强制刷新生产环境资源缓存 #

部分生产环境会缓存静态资源，导致amCharts 5的核心JS/CSS未更新。可在引入资源时添加版本戳避免缓存：

<script src="https://cdn.amcharts.com/lib/5/index.js?v=20240520"></script>
<link href="https://cdn.amcharts.com/lib/5/xy.css?v=20240520" rel="stylesheet">

内容的提问来源于stack exchange，提问作者Attila Balog