アクティビティゲージグラデーション付きハイチャート

Question

下のグラフでグラデーションを使用します。

この懸念について私を助けてください。

ありがとうございます。

Link : http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/gauge-activity/ 

Answer 1

あなたの角度ゲージに勾配を追加するための小さなトリックを使用することができるはずです。あなたは、チャートに色のグラデーションを追加するためのyAxis.stopsを使用することができます。

yAxis: { 
    min: 0, 
    max: 100, 
    lineWidth: 0, 
    tickPositions: [], 
    stops: [ 
    [0.1, '#55BF3B'], // green 
    [0.5, '#DDDF0D'], // yellow 
    [0.9, '#DF5353'] // red 
    ], 
}, 

彼らはポイントの値に応じて異なる色を持つことになりますので、あなたは、あなたの軸の分と自分の価値との間でポイントを追加することができます。ここで

function(chart) { 
    var y = this.series[0].data[0].y; 
    for (var i = y; i >= 0; i = i - (y/80)) { 
     chart.addSeries({ 
     data: [{ 
      y: i, 
      radius: '100%', 
      innerRadius: '100%', 
     }], 
     stickyTracking: false, 
     enableMouseTracking: false 
     }, false) 
    } 
    chart.redraw(); 
    Highcharts.each(chart.series, function(s) { 
     s.update({ 
     borderColor: s.data[0].color 
     }, false); 
    }); 
    chart.redraw(); 
    } 

あなたはそれが動作する方法の例を見つけることができます。 http://jsfiddle.net/5ajoegb9/1/