如何在Highcharts中同时显示热力图图例与常规图例？

可以通过配置Highcharts的内置选项实现同时展示两种图例，具体方法如下：

核心配置思路 #

• 保留热力图专属的颜色轴图例，通过colorAxis配置控制其显示与位置
• 开启Spline系列的普通图例，并确保热力图系列不混入其中
• 调整两个图例的位置避免重叠

具体实现代码示例 #

Highcharts.chart('container', {
  chart: {
    type: 'heatmap'
  },
  // 配置热力图的颜色轴图例
  colorAxis: {
    showLegend: true, // 强制显示颜色轴图例
    legend: {
      align: 'right',
      verticalAlign: 'middle',
      layout: 'vertical',
      itemWidth: 100 // 调整图例项宽度适配需求
    }
  },
  // 配置Spline系列的普通图例
  legend: {
    align: 'center',
    verticalAlign: 'bottom',
    layout: 'horizontal',
    // 过滤掉热力图系列，只显示Spline系列
    labelFormatter: function() {
      return this.userOptions.type !== 'heatmap' ? this.name : '';
    }
  },
  series: [
    // 热力图系列：不显示在普通图例中
    {
      type: 'heatmap',
      data: [[0, 0, 10], [0, 1, 20], [1, 0, 30], [1, 1, 40]],
      showInLegend: false
    },
    // Spline系列1：显示在普通图例中
    {
      type: 'spline',
      data: [15, 25, 35, 45],
      name: '核心指标A',
      showInLegend: true,
      color: '#ff0000'
    },
    // Spline系列2：显示在普通图例中
    {
      type: 'spline',
      data: [10, 20, 30, 40],
      name: '核心指标B',
      showInLegend: true,
      color: '#00ff00'
    }
  ]
});

额外说明 #

• 如果需要更个性化的图例样式，可以通过legend.itemStyle、colorAxis.legend.itemStyle分别调整两种图例的字体、颜色等样式
• 若默认配置无法满足布局需求，可使用Highcharts的renderer API手动绘制自定义图例元素，但上述内置配置方案已覆盖绝大多数场景

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