Highchart 工具提示与系列颜色不匹配 - Solid Gauge Chart

Question

Highcharts 工具提示与系列颜色不匹配，默认为蓝色。 JS Fiddle 显示问题：https://jsfiddle.net/ap5jxb20/

系列的颜色在事件渲染函数中定义，因为我需要逻辑检查来确定颜色。如何将相同的颜色应用到工具提示？

 events: {
                render: function () {
                    var point = this.series[0].points[0];
                    if (point.y < imorequired) {
                        point.graphic.attr({
                            fill: 'green',
                            marker: 'green'
                        })
                    } else if (point.y > imorequired * 1.5) {
                        point.graphic.attr({
                            fill: 'red'
                        })
                    } else {
                        point.graphic.attr({
                            fill: '#ffbf00'
                        })
                    }
                
                    var point2 = this.series[1].points[0];
                    if (point2.y > 0) {
                        point2.graphic.attr({
                            fill: 'green',
                            marker: 'green'
                        })
                    }

                    var point3 = this.series[2].points[0];
                    if (point3.y < imorequired) {
                        point3.graphic.attr({
                            fill: 'green'
                        })
                    } else if (point3.y > imorequired * 1.5) {
                        point3.graphic.attr({
                            fill: 'red'
                        })
                    } else {
                        point3.graphic.attr({
                            fill: '#ffbf00'
                        })

                    }
                }
            }

Answer 1

在这种情况下，Highcharts 使用 point.color 来定义工具提示中的颜色，因此作为解决方案，还要更新 point.color 属性.

  chart: {
    type: 'solidgauge',
    events: {
      render: function() {
        var point = this.series[0].points[0];
        if (point.y < 4.27) {
          point.color = 'green';
          point.graphic.attr({
            fill: 'green',
            marker: 'green'
          })
        } else if (point.y > 4.27 * 1.5) {
          point.color = 'red';
          point.graphic.attr({
            fill: 'red'
          })
        } else {
          point.color = '#ffbf00';
          point.graphic.attr({
            fill: '#ffbf00'
          })
        }
        ...
      }
    }
  }

现场演示： https://jsfiddle.net/BlackLabel/5Lbt6wqn/

API参考：https://api.highcharts.com/class-reference/Highcharts.Point#color

Highchart 工具提示与系列颜色不匹配 - Solid Gauge Chart

Highchart tooltip does not match series colour - Solid Gauge Chart

highcharts