javascript - 如何在 HighChart 中用多个 yAxis 填充两个系列之间的区域？

Question

series之间填充区域的话题已经讨论了很多。我已经看到一些解决方案使用“arearange”系列(添加带有区域范围的虚拟系列以添加填充颜色)或使用“堆叠区域”(使用带有 stacking: true< 的虚拟区域系列，在实际系列下透明，然后添加另一个具有所需颜色的堆叠区域)。 An example can be seen here.

但我的问题非常具体:我需要填充不共享相同 yAxis 的系列之间的区域，因此我无法添加虚拟系列，因为我无法确定要使用哪个 yAxis。

(当系列不共享相同的 xAxis 引用值时会出现同样的问题，as seen in this example)

例如，假设我要填充此图表上蓝色“降雨”线位于绿色“温度”线下方的区域:JSFiddle example

我该怎么做？

Answer 1

我已经接受了塞巴斯蒂安的回答，我在这里发布了它的实现:

我创建了一个函数，它使用第一个系列的数据和第二个系列中数据的修改版本生成类型为“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
    };
};

然后我用它在我的图表中添加新区域，如这个 fiddle 示例所示:

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

再次感谢大家!

限制: 我害怕的事情发生了:如果我只想在第一条曲线在第二条曲线下方时填充(反之亦然)。相邻点有问题。正如您在 updated JSfiddle 中看到的那样.所以这个方案还不够完善，我会改进的。

最新版本: 在我的最终版本中，我将交点添加到我的 arearange 系列中。现在结果很完美。您可以看到算法的结果 here in this JSFiddle 如您所见，我更改了 xAxis，因此我得到了用于计算的值而不是类别。

编辑: 这里是从两条线中找到交点的函数(每条线由两个点定义，因此我们需要 4 个参数:line1Point1 line1Point2、line2Point1、line2Point2)。我不起诉像素坐标，但我根据我的 x 和 y 值计算交点，因为结果点将由 highchart 库以相同的方式映射。

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 能给它一个完整的官方支持，因为当使用logarithmic axis X(