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

How to fill the Area between two series with multiples yAxis in HighChart?

本文关键字：填充 个系列 之间 区域 yAxis HighChart      更新时间：2023-09-26

系列之间填充面积的话题已经讨论了很多。我见过一些使用"arearange"系列的解决方案(添加带有区域范围的虚拟系列来添加填充颜色)或使用"堆叠区域"(使用带有stacking: true的虚拟区域系列，在实际系列下透明，然后添加另一个具有所需颜色的堆叠区域)。在这里可以看到一个例子。

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

(当序列不共享相同的xAxis参考值时，也会出现同样的问题，如本例所示)

例如，假设我想填充这张图表上蓝色的"降雨量"线在绿色的"温度"线下面的区域:

我已经接受了Sebastian的答案，我在这里发布它的实现:

我创建了一个函数，该函数使用第一个系列的数据和第二个系列中数据的修改版本生成'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/

再次感谢大家!

限制:我担心的事情发生了:在这种情况下，我只想在第一条曲线低于第二条曲线的情况下填充(反之亦然)。在相邻点上有一个问题。正如您在更新后的JSfiddle中看到的那样。所以这个解决方案还不完美，我会改进的。

最新版本:在我的最终版本中，我将交点添加到我的arerange系列中。现在的结果是完美的。您可以在这个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能给它一个完整的官方支持，因为当使用对数轴 X(

)时，它会变得更加复杂

您可以使用相同的两个链接轴(相同的范围/刻度)，但具有不同的数据，然后使用arerange类型的附加系列:http://www.highcharts.com/demo/arearange

我认为你的选择基本上是这两种之一:

1)在将数据发送到图表之前对其进行规范化，以便它们可以使用相同的轴。

2)开发一个复杂的脚本来确定系列之间的关系，并相应地创建您的虚拟系列。

然而。

考虑到两个系列使用两个不同的轴，在两个不同的尺度上测量两个不同的东西是非常重要的....

两行之间的交互完全没有意义。

突出显示两条这样的线之间的相互作用是数据可视化的主要常见缺陷之一，但是这种相互作用完全依赖于两个完全不同的轴测量的大部分任意缩放。

就其价值而言。

相关文章：