Pregunta Highcharts solidgauge: ¿Cómo puedo desactivar el relleno de degradado?


Estoy tratando de usar Highcharts nuevo solidgauge enchufar.

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

código fuente proporcionado por Highchart

El medidor acepta tres parámetros de STEP para mostrar diferentes colores en función de los datos. El problema es que muestra color en degradado y yo quería

1) Verde color hasta decir 20%

2) amarillo hasta el 80% y

3) una vez que el valor cruza el 80% del color del calibre debe ser rojo.

¿Es posible?


5
2018-05-01 15:38


origen


Respuestas:


Para obtener un color sólido, establezca la minColor y maxColor  opciones al mismo valor Para establecer el color en función de un valor, simplemente compare en las opciones:

var guageValue = 60;

var gaugeOptions = {

  ...

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

    ....

EDICIONES PARA COMENTAR

Bueno, hacerlo dinámicamente de acuerdo con la API debería ser tan fácil como:

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

Pero, esto rompe el gráfico (y creo que es un error en la biblioteca).

Entonces, lo mejor que se me ocurre es ir directamente al interior:

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

Aquí hay un violín manifestación.


3
2018-05-02 14:21



Puedes establecer paradas, como esta: http://jsfiddle.net/4zVU8/5/

        stops: [
            [0.0, '#55BF3B'], // green
            [0.2, '#55BF3B'], // green
            [0.21, '#DDDF0D'], // yellow
            [0.80, '#DDDF0D'], // yellow
            [0.81, '#DF5353'], // red
            [1, '#DF5353'] // red
        ]

Entonces, justo después de que el color termina, establece un nuevo color.


7
2018-05-05 11:29



// change your stops ,0 and 1 set the same value
var showNumber = 100; // your random data
var tickMaxNumber = 1000; // The yAxis max value 
if(showNumber <= tickMaxNumber*0.2){
    gaugeOptions.yAxis[0].stops = [ // red
        [0, '#EE4B4B'],
        [1, '#EE4B4B']
    ];
}else if(showNumber <= tickMaxNumber*0.8){
    gaugeOptions.yAxis[0].stops = [ // yellow
        [0, '#FFC063'],
        [1, '#FFC063']
    ];
}else{
    gaugeOptions.yAxis[0].stops = [ // green
        [0, '#40A276'],
        [1, '#40A276']
    ];
}

$('#container-speed').highcharts(gaugeOptions);

0
2018-01-21 11:49