Question

我有一个适用于仪表的高图，如下所示：

$('#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类别下，则边框颜色应为绿色。

Answer 1

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

Fiddle

chart: {
    renderTo: 'container',
    type: 'gauge',
    plotBackgroundColor: null,
    plotBackgroundImage: null,
    plotBorderWidth: 0,
    plotShadow: false,
    borderColor:'#DF5353', /*red color*/
    borderWidth: 2
},

<强>更新

获得OP想要的东西

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

Update fiddle link

通过更改串联数据值来测试它

      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"
            },
          });

        }
      }

    }
  }

使用角度标尺

1 个答案: