本文详解如何在 amcharts 4 多线图中，使图例（legend）中的方形标记仅显示与对应线条一致的描边色，彻底移除默认黑色填充，实现简洁、专业的一致性视觉效果。
在 AmCharts 4 中，默认图例标记（legend marker）常带有不可见但影响样式的填充（fill）属性，尤其当开发者手动设置 markerColumn.defaultState.properties.fill（如 #000000）时，会覆盖系列自身指定的颜色逻辑，导致图例显示为黑块或颜色错位。要让图例标记真正“只显示线条颜色”，关键在于清除填充（fill），仅保留描边（stroke），并确保描边色与线条严格同步。
✅ 正确做法：禁用填充，启用纯描边标记
核心修改点如下（对比原代码）：
const marker = chart.legend.markers.template;
const markerColumn = marker.children.getIndex(0);
// ✅ 移除 fill 赋值（注释或删除这一行）
// markerColumn.defaultState.properties.fill = am4core.color("#000000");
// ✅ 设置 fillOpacity = 0，确保无背景色
markerColumn.defaultState.properties.fillOpacity = 0;
// ✅ 描边宽度、颜色、透明度按需设定（推荐与 series.stroke 一致）
markerColumn.defaultState.properties.strokeWidth = 2;
markerColumn.defaultState.properties.stroke = am4core.color("#001739"); // 示例：匹配 series1
markerColumn.defaultState.properties.strokeOpacity = 1;但更优方案是动态绑定描边色到对应系列，避免硬编码。可借助 adapter 实现：
// 为每个图例标记的描边动态绑定其对应 series 的 stroke 颜色
chart.legend.markers.template.adapter.add("stroke", function(stroke, target) {
const series = target.dataItem?.dataContext;
return series && series.stroke ? series.stroke : am4core.color("#ccc");
});不过更简洁可靠的方式，是在创建 series 时就统一控制图例标记样式，并关闭 useDefaultMarker，改用自定义模板：
chart.legend.useDefaultMarker = false;
// 自定义图例标记：纯描边方形
const markerTemplate = chart.legend.markers.template;
markerTemplate.width = 12;
markerTemplate.height = 12;
markerTemplate.cornerRadius(0, 0, 0, 0);
const markerColumn = markerTemplate.children.getIndex(0);
markerColumn.defaultState.properties.fillOpacity = 0;
markerColumn.defaultState.properties.strokeWidth = 2;
// 关键：通过 adapter 动态取 series.stroke
markerColumn.adapter.add("stroke", function(stroke, target) {
const item = target.dataItem;
return item && item.dataContext && item.dataContext.stroke
? item.dataContext.stroke
: am4core.color("#666");
});⚠️ 注意事项
- ❌ 不要直接写 markerColumn.defaultState.properties.fill = ... —— 即使设为透明色，也可能触发渲染异常；
- ✅ 始终配合 fillOpacity = 0 彻底禁用填充；
- ✅ strokeWidth 建议 ≥ 2，确保线条清晰可见（过细易被忽略）；
- ✅ 若启用了 series.fillOpacity > 0（如渐变填充区），图例标记仍应保持无填充，以维持「仅示意线条」的设计语义；
- ✅ 测试图例交互（如点击隐藏系列）：确保 active / inactive 状态下描边色逻辑仍健壮（可选添加 markerColumn.states.getKey("hover").properties.stroke 等）。
✅ 最终效果
图例中每个方形标记将呈现为：
- 无背景（完全透明）；
- 边框为对应折线的精确颜色（如 #001739 或 #808080）；
- 尺寸统一、边缘锐利，与图表整体风格高度协调。
此方案兼顾可维护性与表现力，是 AmCharts 4 多系列可视化中提升专业度的关键细节优化。
