2017-05-19 3 views
1

スプラインでパーセンテージを指定してハイチャートのグラフを作成することはできますが、スタッキングなしで行うことはできますか?スタッキングなしのハイチャートの割合は?

私は相対的な視点で線を表示したいと思いますが、パーセンテージが変わったときに線を通したいと思います。 http://jsfiddle.net/dp6pjeo9/5/

plotOptions: { 
    series: { 
     pointStart: 2010, 
     stacking: 'percent' 

    } 
}, 

が、ライン「スタッキング行動なし:このような基本的

、。スタッキングは、ラインが本当に不便です。なぜなら、それらが「絶対」値であるか「積み重ね」値であるかを区別することが難しいからです。

は、一番上の行は、あなたは、チャートの設定でそれらを置く前に、あなたのデータを処理する必要があり、2010年

enter image description here

+0

もちろん可能です。しかし、あなたが実際にやりたいこと、データの内容などについてより詳細な情報を提供する必要があります。より良い答えを得るための最良のことは、あなたが持っているもののバイブルを作り上げることです。あなたが望むように働いています。 – jlbriggs

+0

Ok @ jlbriggs。するでしょう:) – RobAu

答えて

2

に、次に黒の線の下でなければなりません、ここを参照してください。

計算合計:

var data = [3, 5, 10, 15,25] 
var data2 = [25,15, 10, 5, 0] 

var sum = data.map((v, i) => v + data2[i]) // grab sums 

計算パーセントと設定データ:

series: [{ 
    name: 'Installation', 
    data: data.map((v, i) => ({ 
     y: v/sum[i] * 100, 
     absoluteY: v 
    })) 
}, { 
    name: 'Manufacturing', 
    data: data2.map((v, i) => ({ 
     y: v/sum[i] * 100, 
     absoluteY: v 
    })) 
}] 

変更ツールチップのpointFormatではなくパーセント値の絶対Y値を示すよう

tooltip: { 
    pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.absoluteY}</b><br/>' 
}, 

例:http://jsfiddle.net/dp6pjeo9/6/

+0

ああ、ありがとう、これはもちろん可能です。私はちょうど私が推測するものよりもうまく、すべての軸のフォーマッター等を設定する必要があります。 – RobAu

+1

@RobAu軸ラベルのフォーマットには何もする必要はありません。このソリューションはデータをパーセント値(軸ラベルに反映されます)としてプロットします。ツールチップフォーマッタの目的は、あなたがそれを表示したいならば、ポイントの実際の(元の)値。軸ラベルにパーセント値を表示したくない場合は、元のクエスチョンを理解していません。 – jlbriggs

+0

ああ、私は誤解しています、私は誤解しています。ありがとう! – RobAu

関連する問題