Highcharts solidgauge:如何禁用渐变填充?

I'm trying to use Highcharts new solidgauge plugin.

我正在尝试使用Highcharts新solidgauge插件。

http://jsfiddle.net/4zVU8/2/

source code as provided by highchart

由highchart提供的源代码

The gauge accepts three STEP parameters to show different color based on the Data. The problem is that it displays color in gradient and I wanted

该仪表接受三个步骤参数，根据数据显示不同的颜色。问题是它在渐变中显示颜色，我想

1) Green color upto say 20%

1)绿色向上表示20%

2) yellow upto 80% and

2)黄色高达80%

3) once value crosses 80% gauge color should be Red.

3)一旦值超过80%，则颜色应为红色。

Is it possible?

是可能的吗?

3 个解决方案

#1

To get a solid color, set the minColor and maxColor options to the same value. To set the color based on a value, just compare in the options:

要获得纯色，请将minColor和maxColor选项设置为相同的值。要根据值设置颜色，只需在选项中进行比较:

var guageValue = 60;

var gaugeOptions = {

  ...

yAxis: {
    minColor: guageValue >= 80 ? '#FF0000' : (guageValue >= 60 ? '#FFFF00' : '#00FF00'),
    maxColor: guageValue >= 80 ? '#FF0000' : (guageValue >= 60 ? '#FFFF00' : '#00FF00'),
    lineWidth: 0,

    ....

EDITS FOR COMMENT

编辑记者的置评

Well, doing it dynamically according to the API should be as easy as:

嗯，根据API动态地进行操作应该很简单:

var chart = Highcharts.charts[0];
var point = chart.series[0].points[0];
var color = newGuageValue >= 80 ? '#FF0000' : (newGuageValue >= 60 ? '#FFFF00' : '#00FF00');
chart.yAxis[0].update({minColor:color, maxColor:color});
point.update(newGuageValue);

But, this breaks the chart (and I believe it to be a bug in the library).

但是，这打破了图表(我认为这是库中的一个bug)。

So the best I can come up with is to go after the internals directly:

所以我能想到的最好的办法就是直接研究内部因素:

var chart = Highcharts.charts[0];
var point = chart.series[0].points[0];
var color = newGuageValue >= 80 ? [255,0,0,1] : (newGuageValue >= 60 ? [255,255,0,1] : [0,255,0,1]);
chart.yAxis[0].stops[0].color.rgba = color;
chart.yAxis[0].stops[1].color.rgba = color;
point.update(newGuageValue);

Here's a fiddle demo.

这是一个小提琴演示。

3 个解决方案

#1

更多相关文章

随机推荐