ハイチャートゲージを徐々に塗りつぶしたグラデーションエフェクト

Question

Webアプリケーションのダッシュボードを作成する予定です。アクティビティゲージ（http://www.highcharts.com/demo/gauge-activity）と他のチャートを使用する予定があることを示すために、グラフィカルに表示するデータがあります。 しかし、私たちの要求に応じて、2つ以上の色を使って徐々に効果を盛り込んだグラデーションエフェクトを作成する必要があります。その考え方をより深く理解するために添付のダッシュボードモックアップを参照してください。ハイチャートリニアグラデーションと放射状グラデーションを作成するために最善を尽くしましたが、論理的には不可能です。

私はいくつかの変更を行いましたが、私はこのようなデザインを作ることができましたが、徐々に影響を受けていませんでした。 http://jsfiddle.net/td2v4u4z/26/

私は、まさにこのように、これを作りたい - -

また、これは下の画像ごとに円の内側にラベルを配置することが可能である -

ここ

は私の元のグラフがあります

私のサンプルグラフがある - http://jsfiddle.net/qambxkmo/13/

ハイチャートでどのようにこれらのデザインを達成できるのか教えてください。

ありがとうございます！

Answer 1

「徐々に効果を尽くす」ということは何を意味するのかよく分かりませんが、あなたのチャートの最初のアニメーションについては疑問に思うかもしれません。

グラフを初期アニメーションで作成するために、グラデーションを作成する関数を少し変更することができます。あなたはそれがあなたのゲージに類似した勾配を追加する簡単なの機能を持つことは良い考えだと思うならば、私はあなたがHighchartsユーザーボイスにこの機能を求めることができると思います

http://jsfiddle.net/td2v4u4z/31/

：私はあなたの下のこのチャートを送っています。最高のアイデア（投票数が最も多い）は、今後のHighchartsのバージョンで実装されるようになります。あなたが求めている2番目の質問の場合は

https://highcharts.uservoice.com/

は、私はあなたがあなたのdataLabelsを回転させるためのカスタム機能を追加することができるはずだと思うので、彼らはあなたのドーナツグラフの内側になります。

rotate = function() { 
    $.each(options.series, function(i, p) { 
    angle1 = 0; 
    angle2 = 0; 
    angle3 = 0; 
    allY = 0; 
    $.each(p.data, function(i, p) { 
     allY += p.y; 
    }); 
    $.each(p.data, function(i, p) { 
     p.dataLabels = p.dataLabels || {}; 
     angle2 = angle1 + p.y * 360/(allY); 
     angle3 = angle2 - p.y * 360/(2 * allY); 
     if (angle3 >= 180) { 
     p.dataLabels.rotation = 0 + angle3; 
     } else { 
     p.dataLabels.rotation = 0 + angle3; 
     } 
     angle1 = angle2; 
    }); 
    }); 
}; 

私はそれがうまくいかに簡単な例を作った：http://jsfiddle.net/j7as86gh/31/