有没有办法将不同的颜色填充到 Highcharts 仪表图中的所需点？

Question

我有一个工作正常的 highchart 仪表图。但是，我想根据以下百分比填充颜色。颜色应填充到百分比标记的点，其余颜色应保持灰色。

0 - 25% - red
25 - 75 - yellow
75 - 100 - green

从我绘制的示例中，颜色应该填充黄色到点 45，就像在第二个波段内一样。

有人帮忙吗？

Highcharts.chart('guage_chart', {

  chart: {
    type: 'gauge',
    backgroundColor: 'transparent'
  },

  title: {
    text: 'Percentage of Samples Processed',
    style: {
      color: '#FFF',
      fontSize: '80%',
    }

  },
  tooltip: {
    enabled: false
  },
  pane: {
    background: null,
    startAngle: -90,
    endAngle: 90,
    center: ['50%', '50%']
  },
  credits: {
    enabled: false
  },
  // the value axis
  yAxis: {
    min: 0,
    max: 100,
    lineWidth: 0,
    minorTickInterval: 'auto',
    minorTickWidth: 0,
    minorTickLength: 0,
    minorTickPosition: 'outside',
    minorTickColor: '#666',

    tickPixelInterval: 0,
    tickWidth: 0,
    tickPosition: 'outside',
    tickLength: 0,
    tickColor: '#666',
    labels: {
      step: 1,
      rotation: '',
      y: 20,
      style: {
        color: '#FFF',
        cursor: 'default',
        fontSize: '14px'
      }
    },
    title: {
      text: 'Progress',
      style: {
        color: '#FFF'
      },
      y: 50
    },
    plotBands: [{
      from: 0,
      to: 25,
      color: 'rgb(192, 0, 0)', // red
      thickness: '50%'
    }, {
      from: 25,
      to: 75,
      color: 'rgb(255, 192, 0)', // yellow
      thickness: '50%'
    }, {
      from: 75,
      to: 100,
      color: 'rgb(155, 187, 89)', // green
      thickness: '50%'
    }]
  },

  series: [{
    name: 'Progress',
    data: [45] // the data to be plotted
  }]

}, );

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

<body style="background-color:powderblue;">

  <div id="guage_chart"> </div>

</body>

Answer 1

您可以根据系列数据和颜色限制创建绘图带阵列。示例：

const colorLimits = [25, 75, 100];
const colors = ['red', 'yellow', 'green'];

const seriesData = 45;
const plotBands = [{
    from: 0,
    to: seriesData,
    thickness: '50%',
    color: colors[colorLimits.indexOf(colorLimits.find(limit => seriesData < limit))]
}, {
    from: seriesData,
    to: 100,
    thickness: '50%',
    color: 'gray'
}];

Highcharts.chart('container', {
    ...
    yAxis: {
        ...,
        plotBands
    },
    series: [{
        ...
        data: [seriesData] // the data to be plotted
    }]
});

现场演示： http://jsfiddle.net/BlackLabel/t0z1mf69/

API参考：https://api.highcharts.com/highcharts/yAxis.plotBands

有没有办法将不同的颜色填充到 Highcharts 仪表图中的所需点？

Is there a way to fill different colors up to the desired point in Highcharts gauge graph?

javascript

charts

highcharts