Radial Gradient, für Plot Bands auf einem Messgerät?

Question

Alrighty, also bin ich auf ein interessantes kleines Problem gestoßen. Ich versuche ein Messdiagramm zu erstellen, das dann Plot-Bänder hat. Einfach genug.

Die Komplikation kommt, wenn ich möchte, dass die Plot-Bänder einen Gradienten haben, der gleichmäßig durch das Zentrum verläuft.

Eine grobe js Geige ich gegabelt:

http://jsfiddle.net/maraket/omez0n9r/3/

bemerkt werden, sollte ich eine RadialGradient mit einer scharfen Änderung versuche nach:

{ 
     color: { 
      radialGradient: { 
      cx: 0.5, 
      cy: 0.5, 
      r: 0.5 
      }, 
      stops: [ 
      [0, '#000000'], 
      [0.8, '#ffffff'], 
      [1, '#000000'], 
      ] 
     }, 
     from: 0, 
     to: 100, 
     innerRadius: '90%', 
     outerRadius: '110%' 
     } 

Jetzt für ein einzelnes plotband ich bemerkt dass der radiale Gradient elliptischer als kreisförmig ist, was die Lösung, die ich verwende, nicht ideal macht. Bei Verwendung mehrerer Plot-Bänder funktioniert diese Lösung nicht, da sie die lokalen Plot-Bänder x, y verwendet, die sich ändern, wenn mehrere Plot-Bänder vorhanden sind. Irgendwelche Gedanken wären sehr hilfreich.

Answer 1

Der Grund, warum Gradient elliptisch ist, liegt darin, dass die Bounding Box des Plot-Bandes kein Quadrat, sondern eher ein Rechteck ist. Es ist, weil Sie nicht vollen Winkel verwenden. Vergleichen Sie den Farbverlauf mit dem Vollwinkelbereich - http://jsfiddle.net/3mm1bjqf/.

Da Ihre Bounding Box kein Quadrat ist, müssen Sie ein eigenes Koordinatensystem für den Farbverlauf definieren. Verlaufsattribute können aus den Achseneigenschaften abgerufen werden.

Ihre Steigung sollte wie folgt aussehen:

plotBands: [{ 
    color: { 
    radialGradient: { 
     gradientUnits: 'userSpaceOnUse', // we use our own coord system instead of bbox 
     cx: axis.left + axis.center[0], 
     cy: axis.top + axis.center[1], 
     r: axis.center[2]/2 * 1.1 // multiplying by 1.1 because plotBand's outerRadius is set to 110% 
    }, 

Leider muss dieser Gradient dynamisch eingestellt werden, da Sie keine Achse coords wissen, bevor das Diagramm dargestellt wird - also muss es auf Lade-/neu zeichnen Ereignisse erfolgen.

var chart = new Highcharts.Chart({ 

chart: { 
    renderTo: 'container', 
    type: 'gauge', 
    events: { 
    load: function() { 
     var axis = this.yAxis[0]; 

     axis.update({ 
     plotBands: [{ 
      color: { 
      radialGradient: { 
       gradientUnits: 'userSpaceOnUse', 
       cx: axis.left + axis.center[0], 
       cy: axis.top + axis.center[1], 
       r: axis.center[2]/2 * 1.1 
      }, 
      stops: [ 
       [0, '#000000'], 
       [0.8, '#ffffff'], 
       [1, '#000000'], 
      ] 
      }, 
      from: 0, 
      to: 100, 
      innerRadius: '90%', 
      outerRadius: '110%' 
     }] 
     }) 
    } 
    } 
}, 

Beispiel: http://jsfiddle.net/zfyzvqw1/