徑向梯度，用於測量儀上的繪圖帶？

好吧，所以我遇到了一個有趣的小問題。我正在嘗試創建一個測量圖表，然後繪製樂隊。夠簡單。徑向梯度，用於測量儀上的繪圖帶？

併發症進來時，我想的情節樂隊有一個梯度通過均勻，如果在中心運行。

粗略JS提琴我分叉：

應該注意到我按在嘗試了的RadialGradient有急劇變化：

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

現在單個plotband我注意到徑向梯度更接近圓形，這使得我使用的解決方案並不理想。此外，當使用多個標繪帶時，該解決方案將不起作用，因爲它使用局部標繪帶x，y，如果存在多個標繪帶則會發生變化。任何想法都會非常有幫助。

來源

2017-04-07 Shadowmancer

之所以梯度是橢圓形的，因爲劇情帶的邊界框不是方形，但更多的是矩形。這是因爲，你不使用全角度。將梯度與全角窗格比較 - 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% 
    },

不幸的是，這種梯度必須動態地進行設定，因爲你不知道軸座標中的圖表呈現前 - 所以它必須在加載完成/重繪事件。

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/

來源

2017-04-07 13:44:43 morganfree

徑向梯度，用於測量儀上的繪圖帶？

回答

相關問題