ハイチャートリニアグラデーションの塗りつぶしの上限が固定されています

Question

this exampleと同様の効果が得られます。

ただし、上の例では、表示されているプロットを基準とした勾配を使用しています。したがって、0ストップカラーは、（ピークの実際の値が何であっても）可視プロットのピークで使用され、1ストップカラーがベースで使用されます。

私は0から100の範囲のデータを持っているとします（例：パーセンテージ）。私は "暗"は常に100の値に使用され、 "光"は常に0の値として使用されることを指定できるようにしたい。

可視データの範囲が0〜これはすべてライト・アイ・グラジエント・カラー（グラジエント・スペクトルの下端）で満たされています...ライトから完全に暗くなるようにはしたくありません。

これを達成する方法はありますか？

Answer 1

このようなグラディエントを達成するには、いくつかのことを行う必要があります。

1. 勾配単位は、userSpaceOnUseに切り替える必要があります。
2. x1、y1、x2、y2は、プロット領域の開始点と終了点を指している必要があります。

プロット領域がわからないので、ロードイベントでグラデーションを設定する必要があります。

function() { 
    this.series[0].update({ 
    fillColor: { 
     linearGradient: [0, 0, 0, this.plotHeight] 
    } 
    }); 
} 

例：http://jsfiddle.net/qhuee8uf/1/

今、勾配が勾配が応答されないことを意味、X/Yの属性を固定しています。サイズ変更チャートで動作するグラデーションを作成するには、再描画イベントでグラデーションを再計算する必要があります。

また、シリーズの勾配を更新しても勾配は更新されませんが、新しいものが作成されることがわかりました。

代わりに、あなたはグラデーション属性を直接変更することができます

function adjustGradient() { 
    document.getElementsByTagName('linearGradient')[0].setAttributeNS(null, 'y2', this.plotHeight); 
} 

chart: { 
    events: { 
    load: adjustGradient, 
    redraw: adjustGradient 
    } 
}, 

例：ここではhttp://jsfiddle.net/qhuee8uf/