Highcharts 使用角度规中的plotband颜色更新图表边框颜色

我有一个高度表，如下所示：

$('#div1').highcharts({
    chart: {
        type: 'gauge',
        plotBackgroundColor: null,
        plotBackgroundImage: null,
        plotBorderWidth: 0,
        plotShadow: false,
        borderColor:'#EBBA95',
        borderWidth: 2
    },
    title: {
        text: 'demo'
    },
    credits: {
        enabled: false
    },
    pane: {
        startAngle: -150,
        endAngle: 150,
        background: [{
            backgroundColor: {
                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                stops: [
                    [0, '#FFF'],
                    [1, '#333']
                ]
            },
            borderWidth: 0,
            outerRadius: '109%'
        }, {
            backgroundColor: {
                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                stops: [
                    [0, '#333'],
                    [1, '#FFF']
                ]
            },
            borderWidth: 1,
            outerRadius: '107%'
        }, {
            // default background
        }, {
            backgroundColor: '#DDD',
            borderWidth: 0,
            outerRadius: '105%',
            innerRadius: '103%'
        }]
    },

    // the value axis
    yAxis: {
        min: 0,
        max: 100,

        minorTickInterval: '',

        tickPixelInterval: 15,
        tickWidth: 2,
        tickPosition: 'inside',
        tickLength: 10,
        tickColor: '#666',
        labels: {
            step: 2,
            rotation: 'auto'
        },
        title: {
            text: ''
        },
        plotBands: [{
            from: 0,
            to: 50,
            color: '#55BF3B' // green
        }, {
            from: 50,
            to: 80,
            color: '#DDDF0D' // yellow
        }, {
            from: 80,
            to: 100,
            color: '#DF5353' // red
        }]
    },

    series: [{
        name: 'series1',
        data: [100],
        tooltip: {
            valueSuffix: ''
        }
    }]

});

现在，我想用序列数据打印条带颜色更新图表的边框颜色。由于这里的数据为100，其绘图带颜色为红色，图表边框颜色应为红色。如何获得打印带颜色

---

最初它将是不同的颜色。我想根据仪表工具尖端的打印条带颜色更新颜色。上图中为186，因此颜色应为红色。如果属于0-120类别，则边框颜色应为绿色。

在聊天选项中添加适当的红色

更新

得到OP想要的东西后

使用

事件

加载

选项，可以根据系列中的日期值更改边框颜色

      events: {
    load: function() {
      var series_data = this.series[0].data; //this is  series data
      for (var i = 0; i < series_data.length; i++) {

        if (series_data[i].y >= 0 && series_data[i].y <= 120) {
          this.update({
            chart: {
              borderColor: "#55BF3B"
            },
          });
        }
        if (series_data[i].y > 120 && series_data[i].y <= 160) {
          this.update({
            chart: {
              borderColor: "#DDDF0D"
            },
          });
        }
        if (series_data[i].y > 160 && series_data[i].y <= 200) {
          this.update({
            chart: {
              borderColor: "#DF5353"
            },
          });

        }
      }

    }
  }

通过串联更改数据值进行测试

      events: {
    load: function() {
      var series_data = this.series[0].data; //this is  series data
      for (var i = 0; i < series_data.length; i++) {

        if (series_data[i].y >= 0 && series_data[i].y <= 120) {
          this.update({
            chart: {
              borderColor: "#55BF3B"
            },
          });
        }
        if (series_data[i].y > 120 && series_data[i].y <= 160) {
          this.update({
            chart: {
              borderColor: "#DDDF0D"
            },
          });
        }
        if (series_data[i].y > 160 && series_data[i].y <= 200) {
          this.update({
            chart: {
              borderColor: "#DF5353"
            },
          });

        }
      }

    }
  }

事件：{
加载：函数（）{
var series_data=this.series[0].data；//这是序列数据
对于（变量i=0；iif（series_data[i].y>=0&&series_data[i].y 120&&series_data[i].y 160&&series_data[i].y图表边框颜色应为红色。您是否可以使用图片更新，所需的图表边框颜色应使用打印带颜色更新。我已添加图像，最初它将是不同的颜色。我希望根据仪表工具提示的打印带颜色更新颜色。在上图中，它是186，因此颜色应为红色。如果它属于0-120类别，那么边框颜色应该是绿色。好的，我知道了，您希望边框颜色将根据内部指针。图像范围标记与您提供的代码不同。因此更新了答案