如何设置amCharts4折线图图例标记为对应线条颜色的纯色方块

要实现图例标记为对应折线颜色的纯色方块，你需要调整图例标记的默认状态配置，同时利用amCharts的系列配置绑定颜色，具体修改如下：

核心修改点 #

• 移除手动设置的markerColumn.defaultState.properties.fill = am4core.color("#000000")，这是导致黑色标记的根源
• 关闭chart.legend.useDefaultMarker，让系列自定义的legendSettings生效
• 清理重复的颜色赋值代码，确保系列的legendSettings.markerFill正确绑定折线颜色

修改后的完整代码 #

JavaScript #

am4core.useTheme(am4themes_animated);

// 创建图表实例
var chart = am4core.create("chartdiv", am4charts.XYChart);

// 添加数据
chart.data = [{
  "date": new Date(2018, 0, 1),
  "value": 450,
  "value2": 362,
  "value3": 699
}, {
  "date": new Date(2018, 0, 2),
  "value": 269,
  "value2": 450,
  "value3": 841
}, {
  "date": new Date(2018, 0, 3),
  "value": 700,
  "value2": 358,
  "value3": 699
}, {
  "date": new Date(2018, 0, 4),
  "value": 490,
  "value2": 367,
  "value3": 500
}, {
  "date": new Date(2018, 0, 5),
  "value": 500,
  "value2": 485,
  "value3": 369
}, {
  "date": new Date(2018, 0, 6),
  "value": 550,
  "value2": 354,
  "value3": 250
}, {
  "date": new Date(2018, 0, 7),
  "value": 420,
  "value2": 350,
  "value3": 600
}];

// 创建坐标轴
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.grid.template.location = 0;

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

// 创建系列
function createSeries(field, name, linecolor, fillcolor) {
  var series = chart.series.push(new am4charts.LineSeries());
  series.dataFields.valueY = field;
  series.dataFields.dateX = "date";
  series.name = name;
  series.tooltipText = "{dateX}: [b]{valueY}[/]";
  series.strokeWidth = 2;
  series.stroke = am4core.color(linecolor);
  series.fillOpacity = 1;
  // 设置图例标记为方块，并绑定折线颜色
  series.legendSettings.markerShape = "square";
  series.legendSettings.markerFill = am4core.color(linecolor);
  
  // 如需给折线区域添加渐变，取消以下注释并调整颜色
  // var gradient = new am4core.LinearGradient();
  // gradient.addColor(am4core.color(linecolor), 0);
  // gradient.addColor(am4core.color(fillcolor), 1);
  // series.fill = gradient;
  
  return series;
}

var series1 = createSeries("value", "Series #1", "#001739", "#89CFF0");
var series2 = createSeries("value2", "Series #2", "#808080", "#E5E6E4");

// 创建图例
chart.legend = new am4charts.Legend();
// 关闭默认标记，使用系列自定义设置
chart.legend.useDefaultMarker = false;

// 调整图例标记样式（可选：移除多余边框）
const marker = chart.legend.markers.template;
const markerColumn = marker.children.getIndex(0);
markerColumn.cornerRadius(0, 0, 0, 0);
markerColumn.defaultState.properties.strokeWidth = 0;

chart.cursor = new am4charts.XYCursor();

CSS #

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#chartdiv {
  width: 100%;
  height: 180px;
}

HTML #

<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>

说明 #

• 关闭useDefaultMarker后，系列的legendSettings会完全控制图例标记的样式，包括颜色和形状
• 移除了原代码中强制设置的黑色填充和白色边框，让标记直接使用系列指定的颜色
• 如需折线区域的渐变效果，取消createSeries函数中渐变代码的注释即可

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