如何用HighChart中的yAxis倍數填充兩個系列之間的區域？

Question

系列之間填充區域的話題已經討論了很多。我已經看到一些解決方案使用'arearange'系列（添加虛擬系列，區域範圍添加填充顏色）或使用「堆疊區域」（使用虛擬區域系列stacking: true，在實際系列下透明，然後添加另一個堆疊區域所需的顏色）。 An example can be seen here.

但我的問題是非常具體的：我需要填補之間的區域，以不共享相同的yAxis系列，因此我不能添加一個虛擬系列，因爲我無法確定哪個yAxis使用。

（當一系列不共享相同的X軸的參考值，就會發生同樣的問題，as seen in this example）

例如，假設我要填補這個圖表上的區域，其中藍色的「降雨」線下綠色'溫度'線：JSFiddle example

我該怎麼做？

Answer 1

您可以使用相同的兩個連接軸（同一範圍/蜱），但不同的數據，然後使用其他系列arearange類型：http://www.highcharts.com/demo/arearange

Answer 2

我覺得你的選擇是相當多的一個兩個：

1）將其發送到圖表，使他們能夠使用相同的軸之前正常化您的數據。

2）開發一個複雜的腳本來確定系列相互之間的關係，並據此創建虛擬系列。

然而，

考慮的事實這是非常重要的是使用兩個系列的兩個獨立的軸，測量在兩個不同的尺度兩種不同的東西....

的2線之間的相互作用是完全意義。

數據可視化的主要常見缺陷之一是強調兩條這樣的線之間的相互作用，但交互完全依賴於兩個完全不同的軸測量的主要任意比例。

FWIW。

Answer 3

我已經接受了塞巴斯蒂安的答案，我在這裏公佈其實施：

我創建了一個函數，它使用第一個系列的數據和第二個系列中的數據的修改版本生成一個類型爲'arearange'的虛擬系列，以便將它們映射到主yAxis ：

/** 
*generate a dummy arearange series in order to fill area between our two series. 
*/ 
function createRangeSerie(data1, min1, max1, data2, min2, max2) 
{ 
    //we will apply a linear transfomation to values from the second series 
    var b = min1-min2; 
    var a = (max1 - b)/max2; 

    var rangeData = []; 
    $.each(data1, function(index, value) { 
     var value2 = a*data2[index] + b; 

     rangeData.push([value, value2]); 
    });  

    //return the third series, used to fill the area between our 2 series.  
    return { 
     name: 'areaRangeSerie', 
     type: 'arearange', 
     data: rangeData 
    }; 
}; 

然後，我用它來添加新的領域在我的圖表中看到此提琴例如：

http://jsfiddle.net/2me4Z/3/

再次感謝你們！

限制： 我怕什麼發生：在情況下，我想只有在第一條曲線是第二次（或反之亦然）下，以填補。在相鄰的點上有問題。正如你在updated JSfiddle中看到的那樣。所以這個解決方案還不完善，我會改進它。

最後版本： 在我的最終版本中，我添加了交叉點到我的arearange系列。現在結果是完美的。你可以看到算法here in this JSFiddle 的結果，你可以看到，I4ve改變了xAxis，所以我得到了計算值而不是類別。

編輯：這裏是找到兩條線（每條線都由兩個點定義，所以我們需要4個參數：line1Point1 line1Point2，line2Point1，line2Point2）的交點函數。我不起訴像素座標，但我從我的x和y值計算交集，因爲結果點將以相同的方式由高圖庫進行映射。

function intersectionPoint(l1Pt1, l1Pt2, l2Pt1, l2Pt2){ 
    console.log(l1Pt1, l1Pt2, l2Pt1, l2Pt2); 

    //compute A B and C for the first line: AX + BY = C 
    A1 = l1Pt2.y-l1Pt1.y; 
    B1 = l1Pt1.x-l1Pt2.x; 
    C1 = A1*l1Pt1.x + B1 *l1Pt1.y; 

    //compute A B and C for the second line 
    A2 = l2Pt2.y - l2Pt1.y; 
    B2 = l2Pt1.x - l2Pt2.x; 
    C2 = A2*l2Pt1.x + B2*l2Pt1.y; 

    var delta = A1*B2 - A2*B1; 
    if(delta == 0) { 
     console.log("Lines are parallel"); 
     return null; 
    } 
    else 
    { 
     return { 
      x: (B2*C1 - B1*C2)/delta, 
      y: (A1*C2 - A2*C1)/delta 
     };  
    } 

}; 

我真的很期待highchart給它一個完整的官方支持，因爲它使用數軸 X（