放射状勾配、ゲージのプロットバンド用？

Question

私は面白い小さな問題に直面しています。ゲージチャートを作成しようとしていますが、それにはプロットバンドがあります。十分に簡単です。

私がプロットバンドに均等に中心を通る勾配を持たせたい場合、問題が発生します。

私はフォークラフJSフィドル：

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

私があたりのように急激な変化でradialgradientをしようとしています気づいたする必要があります。

私は気づいた単一plotbandのための今

{ 
     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%' 
     } 

ラジアルグラデーションは、より楕円であり、私が使用しているソリューションを理想的ではない円形にしています。さらに複数のプロットバンドを使用する場合、複数のプロットバンドがある場合に変更されるローカルプロットバンドx、yを使用するので、この解決法は機能しません。どんな考えも非常に役立ちます。

Answer 1

グラデーションが楕円形の理由は、プロットバンドの境界ボックスが正方形ではなく、より長方形であるためです。それはあなたが完全な角度を使用していないからです。完全な角度のペインでグラデーションを比較してください - http://jsfiddle.net/3mm1bjqf/

バウンディングボックスが正方形ではないので、グラデーションの独自の座標系を定義する必要があります。勾配属性は、軸プロパティから取得できます。

あなたの勾配が次のようになります - それは、ロード/再描画イベントを行う必要があります

残念ながら

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% 
    }, 

をチャートがレンダリングされる前に、あなたは軸COORDSを知らないので、この勾配は、動的に設定する必要があります。

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%' 
     }] 
     }) 
    } 
    } 
}, 

例：http://jsfiddle.net/zfyzvqw1/