Angular中Apex Charts图例标记描边颜色设置问题求助

方法1：使用内置配置项strokeColors #

Apex Charts提供了图例标记的边框颜色配置，藏在legend.markers下的strokeColors属性中，直接在图表配置里设置即可：

export class YourComponent implements OnInit {
  chartOptions: Partial<ChartOptions> = {
    legend: {
      markers: {
        strokeWidth: 2, // 自定义边框宽度
        strokeColors: ['#000000', '#ff0000', '#00ff00'] // 对应每个系列的边框颜色，与series顺序一一匹配
      }
    },
    series: [
      { name: '系列1', data: [30, 40, 35, 50, 49] },
      { name: '系列2', data: [23, 12, 54, 67, 89] }
    ],
    // 其他图表配置项...
  };
}

如果所有图例标记想用同一种边框颜色，直接传单个字符串即可：strokeColors: '#333333'

方法2：通过customHtml动态获取系列颜色 #

如果必须使用customHtml，可以通过ctx参数获取当前系列的颜色，手动给标记添加边框样式：

chartOptions: Partial<ChartOptions> = {
  legend: {
    customHtml: (seriesIndex, opts) => {
      // 获取当前系列的默认颜色
      const seriesColor = opts.w.globals.colors[seriesIndex];
      return `
        <div class="custom-legend-item">
          <span class="custom-marker" style="background-color: ${seriesColor}; width: 12px; height: 12px; display: inline-block; border: 2px solid #000; border-radius: 2px; margin-right: 8px;"></span>
          <span>${opts.w.globals.seriesNames[seriesIndex]}</span>
        </div>
      `;
    },
    // 关闭默认标记渲染，避免冲突
    markers: { show: false }
  },
  // 其他配置项...
};

方法3：全局CSS覆盖 #

如果所有图例标记需要统一边框样式，直接通过CSS覆盖默认元素：

.apexcharts-legend-marker {
  border: 2px solid #000 !important;
}

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