Highcharts实心规，显示先前停止的颜色

Question

我需要创建一个高图固体测量仪，但我需要确定所识别的＆＃39;停止＆＃34;的颜色。保持可见，因为它动画/过渡到额外的停止。

所以，让我们说图表在另一端代表0％到100％，前30％是绿色（好），然后下一个30％是橙色（警告），剩下的40 ％是红色（坏）。如果压力表的结果低于30％那么它将显示绿色，然后如果它超过30％但低于60％（假设50％）它将显示前30％的绿色然后橙色为剩余的20％，然后是剩余弧线的默认灰色，如果结果为75％，它将显示前30％的绿色，下一个30％的橙色，然后剩余的15％为红色，然后剩下的未使用的是默认的灰色...依此类推。

它会像默认的实体标尺一样动画，但不会在更改停止时将整个标尺更改为单一颜色，它仍会显示之前的停止。

这可能吗？我创建了一个简单的动画gif图像来展示我在说什么。

Answer 1

似乎Highcharts不支持solidgauge系列的那种点着色。

作为解决方法，您可以创建多个（正确着色的）点，并使用它们初始化系列的数据并模仿这种外观。

实时工作示例： http://jsfiddle.net/kkulig/rm0p5113/

getPointColor函数根据它的值返回点的颜色：

var ranges = [3, 7, 10];

(...)

function getPointColor(val) {
  if (val > ranges[1]) {
    return 'red';
  } else if (val > ranges[0]) {
    return 'orange';
  } else {
    return 'green';
  }
}

computePoints创建数据数组（点必须为降序）

function computePoints(val) {
  var data = [];

  ranges.forEach(function(range) {
    if (val > range) {
      data.unshift({
        y: range,
        color: getPointColor(range)
      });
    }
  });

  data.unshift({
    y: val,
    color: getPointColor(val)
  });

  return data;
}

系列选项的创建方式如下：

  series: [{
    data: computePoints(9)
  }]

请注意，这些功能非常简单。它们仅用于演示目的。