如何自定义Highcharts地图图例：改为点状样式并修改文本

核心修改方向 #

• 把图例符号调整为圆形点状样式
• 自定义图例项的显示文本
• 适配布局匹配目标效果

最终配置代码 #

colors: ["#B7B7B7", "#861086"],
legend: {
  enabled: true,
  title: {
     text: "Legend",
  },
  align: "left",
  verticalAlign: "bottom",
  floating: true,
  layout: "vertical",
  valueDecimals: 0,
  // 配置圆形点状符号
  symbolRadius: 10, // 设置为半圆值，将方形符号转为圆形
  symbolHeight: 12,
  symbolWidth: 12, // 宽高一致保证正圆形态
  // 自定义图例文本
  labelFormatter: function() {
    // 根据系列索引匹配对应文本，对应colors数组的两个颜色
    return this.index === 0 ? '未覆盖区域' : '已覆盖区域';
  }
},
series: [
  // 拆分为两个系列，分别对应图例的两个项
  {
    data: [], // 未覆盖区域的地图数据
    joinBy: ["iso-a3", "key"],
    name: "未覆盖区域",
    dataLabels: {
      enabled: false,
    },
  },
  {
    data: [], // 已覆盖区域的地图数据
    joinBy: ["iso-a3", "key"],
    name: "已覆盖区域",
    dataLabels: {
      enabled: false,
    },
  },
],

配置说明 #

1. 点状图例实现：

   • 将symbolRadius设为与symbolHeight/2相等的数值（或直接设为较大值），让方形符号变为圆形
   • 同步设置symbolWidth和symbolHeight为相同小数值，确保符号是正圆的点状样式

2. 自定义图例文本：

   • 两种实现方式：一是通过legend.labelFormatter函数，根据系列索引/名称返回自定义文本；二是直接给每个series设置name属性，图例将直接显示该名称

3. 布局适配：

   • 保留原有vertical布局、left对齐等配置，保证图例位置与目标效果一致

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