Highcharts坚实的测量仪，显示以前停在仪表上的颜色 [英] Highcharts solid gauge, show colors of previous stops in gauge

问题描述

我需要创建一个highcharts solid gauge，但我需要让已识别的停止的颜色保持可见状态，因为它会将动画/转换到额外的停靠点。因此，假设图表的另一端代表0％至100％，前30％为绿色（好），则下一个30％为橙色（警告），其余40％为红色（坏的）如果测量结果低于30％，则显示绿色，如果超过30％但低于60％（比如说50％），则会显示绿色，前面30％，然后是橙色剩下的20％，然后是其余弧的默认灰色，那么如果结果是75％，它将显示前30％的绿色，接下来的30％显示橙色，剩下的15％显示红色，然后是剩余的未使用的是默认的灰色...等等。

它会像默认的实心标尺一样生成动画，但不会将整个标尺更改为单一颜色它改变停止，它仍然会显示前一个停止。

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

rel =nofollow noreferrer>

<对于 solidgauge 系列，Highcharts似乎不支持这种点着色。

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

现场工作示例 http://jsfiddle.net/kkulig/rm0p5113/

getPointColor 函数返回颜色基于它的价值：

  var ranges = [3，7，10]; 
 
（...）
 
函数getPointColor（val）{
 if（val> ranges [1]）{
 return'red' ; 
} else if（val> ranges [0]）{
 return'orange'; 
} else {
 return'green'; 
 
 
  

computePoints 创建数据数组（点必须以降序排列）

$ p $ 函数computePoints（val） {
var data = [];

ranges.forEach（函数（范围）{
if（val>范围）{
data.unshift（{
y：range，
color ：getPointColor（range）
}）;
}
}）;

data.unshift（{
y：val，
color：getPointColor（val）
}）;

返回数据;
}


系列选项是这样创建的：

 系列：[{
 data：computePoints（9）
}] 
  

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

I need to create a highcharts solid gauge but I need to have the colors of the identified 'stops" to remain visible as it animates/transitions into the additional stops.

So, let's say that the chart represents 0% to 100% on the other end, and the first 30% is green (good), then the next 30% is orange (warning) and the remaining 40% is red (bad). If the results of the gauge is under 30% then it will show the green color, then if it is over 30% but under 60% (let's say 50%) it will show the green for the first 30% then orange for the remaining 20%, then the default gray for the remaining arc, then if the result is at 75% it will show the green for the first 30%, orange for the next 30%, then red for the remaining 15%, then the remaining unused is the default gray... and so on.

It will animate just like the default solid gauge, but instead of changing the entire gauge to a single color when it changes the stops, it will still show the previous stops.

Is this possible? I created a simple animated gif image to show what I am talking about.

解决方案

It seems that Highcharts doesn't support that kind of point coloring for solidgauge series.

As a workaround you can create multiple (properly colored) points and use them to initialize the series' data and mimic that kind of look.

Live working example: http://jsfiddle.net/kkulig/rm0p5113/

getPointColor function returns the color of the point based on it's value:

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 creates data array (points must be in descending order)

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 options are created like this:

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

Please notice that these functions are very simplified. They serve only for demonstration purposes.

这篇关于Highcharts坚实的测量仪，显示以前停在仪表上的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！