Highcharts Solidgauge标签与图例未匹配系列颜色问题求助

数据标签颜色修正 #

默认实心仪表图的数据标签不会自动继承系列颜色，需手动配置绑定系列颜色：

• 在plotOptions.solidgauge.dataLabels中设置颜色为当前系列颜色：

plotOptions: {
  solidgauge: {
    dataLabels: {
      style: {
        color: function() {
          return this.color; // 绑定对应系列的颜色
        },
        fontWeight: 'bold'
      }
    }
  }
}

图例颜色修正 #

实心仪表图图例默认显示灰色，需通过格式化函数自定义颜色：

1. 开启图例后，添加标签格式化逻辑，返回带系列颜色的名称：

legend: {
  enabled: true,
  labelFormatter: function() {
    return '<span style="color:' + this.color + '">' + this.name + '</span>';
  },
  itemStyle: {
    color: 'inherit' // 让自定义颜色覆盖默认灰色样式
  }
}

关键配置完整示例 #

Highcharts.chart('container', {
  chart: {
    type: 'solidgauge'
  },
  legend: {
    enabled: true,
    labelFormatter: function() {
      return '<span style="color:' + this.color + '">' + this.name + '</span>';
    },
    itemStyle: {
      color: 'inherit'
    }
  },
  plotOptions: {
    solidgauge: {
      dataLabels: {
        enabled: true,
        format: '{y}% ({series.name})',
        style: {
          color: function() {
            return this.color;
          },
          fontSize: '16px',
          fontWeight: 'bold'
        }
      }
    }
  },
  series: [
    {
      name: '系列1',
      data: [65],
      color: '#FF5733'
    },
    {
      name: '系列2',
      data: [45],
      color: '#33FF57'
    }
  ]
});

配置完成后，数据标签和图例名称都会匹配对应系列的颜色，解决灰色显示的问题。

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