iPhone6端amPieChart图例不显示问题排查求助

我之前也帮用户解决过类似的amCharts小屏iOS兼容性问题，结合你给出的配置和场景，咱们一步步定位问题：

1. 优先检查图例容器的尺寸与边距配置 #

你设置了autoMargins: false，这会让amCharts放弃自动调整图例的边距和尺寸适配。在iPhone6的375px窄屏上，很可能图例容器被挤压到没有足够空间显示内容，或者元素溢出后被隐藏了。

试试这两个调整：

• 临时开启autoMargins: true，让图表自动适配容器空间：

  "legend": {
    "divId": "piChartLegendDiv",
    "position": "bottom",
    "autoMargins": true, // 开启自动边距适配
    "labelText": "[[title]]",
    "valueWidth": "0",
    "markerType": "circle"
  }
  

• 如果开启自动边距后布局不符合预期，手动给图例设置最大宽度和最小高度，适配iPhone6的屏幕：

  "legend": {
    // ...其他原有配置
    "maxWidth": 350, // 限制最大宽度为350px（留25px左右的侧边距）
    "minHeight": 40 // 确保图例容器不会被压缩到高度为0
  }
  

2. 检查iPhone6专属媒体查询的样式冲突 #

你提供的媒体查询代码不完整，大概率是这里的样式导致了图例容器异常。比如可能不小心设置了overflow: hidden、width: 0或者过大的内边距，把图例内容挤出去了。

补充完善媒体查询的样式，确保图例容器有足够的显示空间：

/* ----------- iPhone 6 / 7 / 8 ----------- */
/* Portrait and Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) {
  #piChartLegendDiv {
    overflow: visible !important; /* 禁止隐藏溢出内容 */
    width: 100% !important; /* 让容器占满父元素宽度 */
    padding: 5px 10px !important; /* 给内容留合适的内边距 */
    box-sizing: border-box !important; /* 确保内边距不会撑大容器 */
  }
}

3. 排查amCharts在旧iOS系统的渲染bug #

iPhone6通常运行iOS 10或11，旧版amCharts在这些系统上可能存在markerType: circle的绘制bug，或者labelText模板解析的问题。

可以做两个测试：

• 把markerType换成square，看看图例是否能显示：

  "legend": {
    // ...其他原有配置
    "markerType": "square"
  }
  

• 简化labelText为静态文本（比如"labelText": "测试图例"），排除模板解析的问题。如果静态文本能显示，说明[[title]]对应的字段可能在iPhone6的环境下没有正确传递。

4. 确认图表初始化时机是否正确 #

如果容器还没完全加载或尺寸还没确定就初始化图表，amCharts可能会计算错误的图例尺寸。确保在DOM完全加载后再初始化图表，或者监听窗口resize事件重新计算尺寸：

// 等待DOM加载完成后初始化图表
document.addEventListener('DOMContentLoaded', function() {
  // 这里写你的图表初始化代码
  var chart = am4core.create("chartdiv", am4charts.PieChart);
  // ...后续图表配置
});

// 监听resize事件，重新计算图表尺寸
window.addEventListener('resize', function() {
  if (chart) {
    chart.invalidateSize();
  }
});

按这个顺序排查，大概率能定位到问题——最常见的原因就是容器尺寸或边距的配置冲突。

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