Question

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

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

（当系列不共享相同的xAxis参考值as seen in this example时出现同样的问题）

例如，假设我想填写此图表中蓝色“降雨”线位于绿色“温度”线下的区域：JSFiddle example

我该怎么做？

Answer 1

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

我创建了一个函数，使用第一个系列的数据和第二个系列中数据的修改版本生成一个类型为“arearange”的虚拟系列，以便将它们映射到主yAxis上： / p>

/**
*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中看到的那样。所以这个解决方案仍然不完美，我会改进它。

最后一个版本： 在我的最终版本中，我已经添加了我的区域范围系列的交叉点。现在结果是完美的。您可以在算法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
        };    
    }

};

我真的希望高图能为其提供完整的官方支持，因为当使用对数轴 X时，它会变得更加复杂（

Answer 2

我认为你的选择几乎就是这两个中的一个：

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

2）开发一个复杂的脚本来确定系列相互之间的位置，并相应地创建你的虚拟系列。

但是。

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

两条线之间的相互作用完全毫无意义。

数据可视化的主要常见缺陷之一是突出两条此类线之间的相互作用，但相互作用完全取决于两个完全不同的轴测量的大多数任意缩放。

FWIW。

Answer 3

您可以使用相同的两个链接轴（相同的范围/刻度）但使用不同的数据，然后使用区域范围类型的其他系列：http://www.highcharts.com/demo/arearange

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

3 个答案: