Highcharts solidgauge：我如何禁用渐变填充？ [英] Highcharts solidgauge : How can I disable gradient fill?

问题描述

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

http://jsfiddle.net/4zVU8/2/
$ b 源代码由highchart提供

根据数据显示不同的颜色。问题是，它显示渐变颜色，我想要

<1> 绿色颜色达到20％

<2> 黄色高达80％和

3）一旦数值超过80％，颜色应该是红色即可。

可能吗？ 为了获得纯色，设置 minColor 和<$> c $ c> 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，
 
 .... 
  

发表评论

它动态根据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）; 
  

但是，这打破了图表（我相信它是库中的一个bug） / p>

所以最好的办法是直接在内部进行：

  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）; 
  

这是一个小提琴 demo 。

I'm trying to use Highcharts new solidgauge plugin.

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

source code as provided by 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%

2) yellow upto 80% and

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

Is it possible?

解决方案

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:

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:

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).

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.

这篇关于Highcharts solidgauge：我如何禁用渐变填充？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！