2

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

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

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

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

我怎样才能做到这一点 ？

4

3 回答 3

4

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

我创建了一个函数，该函数使用第一个系列的数据和第二个系列中数据的修改版本生成一个“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中看到的那样。所以这个解决方案仍然不完美，我会改进它。

最新版本： 在我的最终版本中，我已将交点添加到我的 arearange 系列中。现在结果很完美。如您所见，您可以在此 JSFiddle中看到算法的结果 ，I4ve 更改了 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 时它会再次变得更加复杂（

于 2013-06-07T09:58:34.460 回答
2

我认为您的选择几乎是以下两种之一：

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

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

然而。

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

两条线之间的交互是完全没有意义的。

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

FWIW。

于 2013-05-31T16:32:11.053 回答
2

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

于 2013-06-06T15:07:18.167 回答