Highcharts Area Range图表图例图标与标记不匹配问题求助

嘿，我懂你遇到的这个问题——明明给series设置了square方形标记，但图例里还是显示默认的区域样式图标，和数据点的标记对不上，对吧？

这是Area Range图表的一个小特性：默认情况下，它的图例图标是基于区域填充的样式，不会自动同步你设置的marker符号。要让两者统一，咱们只需要给series手动加上legendSymbol属性，指定和marker一样的符号就行。

下面是修改后的配置代码，我已经帮你加上了关键的一行：

var highchartOptions = {
  "chart": {
    "type": "arearange",
    "renderTo": "chart-container"
  },
  "series": [{
    "marker": {
      "symbol": "square"
    },
    // 新增这行，让图例图标和数据点标记保持一致
    "legendSymbol": "square",
    "tooltip": {
      "pointFormat": '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.formattedValue}</b><br/>'
    },
    "data": [{
      "low": 50.5,
      "high": 58.4,
      "formattedValue": "Between 50.5 and 58.4",
      "x": 0
    }, {
      "low": 56.6,
      "high": 61.4,
      "formattedValue": "Between 56.6 and 61.4",
      "x": 1
    }, {...} ]
  }]
}

如果你的图表里有多个Area Range系列，想统一设置的话，也可以在plotOptions里全局配置，这样就不用每个series都写一遍了：

var highchartOptions = {
  "chart": {
    "type": "arearange",
    "renderTo": "chart-container"
  },
  "plotOptions": {
    "arearange": {
      "marker": {
        "symbol": "square"
      },
      "legendSymbol": "square"
    }
  },
  "series": [{
    "tooltip": {
      "pointFormat": '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.formattedValue}</b><br/>'
    },
    "data": [{...}]
  }]
}

这样设置之后，图例的图标就会和数据点的方形标记完全匹配啦～

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