无法为highcharts添加漂亮的阴影

Question

我有两行A和B，我尝试在它们之间绘制不同颜色区域：绿色A > B和红色A < B。我通过arearange系列类型实现了着色区域。你可以在这里看到我的作品：http://jsfiddle.net/kSNsT/

问题是：当数据分组发生时（即图表中的单点对应于我的情况下超过一天），阴影变得疯狂。如果使用底部的范围选择器缩小图表间隔，则阴影几乎是完美的。但是当你扩大它时它会超出界限。

我试图为arearange.dataGrouping.approximation编写自己的处理程序，但它并没有太大帮助。有什么想法吗？

有一个类似的问题here，但该解决方案不适用于分组。

Answer 1

正如 Sebastian Bochan 在他的回答中指出的那样，如果你只是直接从数据中创建额外/不足阴影的额外区域，那就更简单了 - 我不认为你真的需要做你正在做的工作来建立你的阴影区域。 然而不能解决您的数据分组问题。

我可以接近 - 但不是很完美。起初我认为问题只是在所有数据集上使用相同的聚合函数，但是当它在交叉点上聚合时它不会出错。

我所做的是创建两组从A到B的范围数据：

for (i = 0; i < data1.length; i ++) { 
    var valA = data1[i][1];
    var valB = data2[i][2];       
    under[i] = [data1[i][0], valA, valB ];  
    over[i] = [data1[i][0], valB, valA ];  
}

然后我给出了每组范围数据，它只是改变图形形状的聚合函数，只显示适用的大/小。

function shadeApproxUnder(low,high) {
    low = average_(low);
    high = average_(high);
    if (low > high) return [ high, high ];
    return [ low, high ];
}

function shadeApproxOver(low,high) {
    low = average_(low);
    high = average_(high);
    if (low > high) return [ low, low ];
    return [ low, high ];        
}

也是一行，以便我知道聚合值是相同的：

function lineApprox(values) { 
    var avg = average_(values);
    return avg;
}

你可以在fiddle中看到这一点，但你可以看到它并不完美。这是因为有两条线交叉的地方没有数据点。由于我假设系统在两个数据点之间以块的形式绘制东西，因此无法使其工作。

您可以尝试在聚合函数中返回[ null, null ]而不是[ high, high ]或[ low, low ]，并更清楚地看到差距。

看起来你真的需要以某种方式在交叉连接处添加数据点，我不知道该怎么做。您不能仅编辑数据，因为数据分组会更改数据 - 但您无法在聚合函数中执行此操作，因为您无法添加数据点。

您可以尝试保存绘制线条时生成的所有聚合数据点值，并使用它来插入区域图形，并推断出额外的数据点 - 但我不清楚它是如何做的那样＆＃39 ;当你刷新图表时我会工作（我怀疑它不会）。

编辑

我有一个更好的解决方案，但它仍然没有工作 - 也许你或其他人可以发现这个缺陷。

基本上，正如我上面所说，我们想在阴影曲线上为线交点添加数据点，这是我的尝试 - 使用存储在＆＃39; dataGrouping＆＃39;中的图表中的数据完成。 之后的数据分组：

function updateChart(chart, refresh) {
    var dir = 0;
    var over = Array(), under = Array();
    var dataA = chart.series[2].groupedData;
    var dataB = chart.series[3].groupedData;

    j = 0; // Index into over/under
    for (i=0;i < dataA.length; i++) {            
        if (dataA[i].y < dataB[i].y) {                           
            if (dir == -1) { 
                over[j] = under[j] = getIntersection(dataA[i-1], dataA[i], 
                                                     dataB[i-i], dataB[i]);         
                j++;
            }
            dir = 1;
            over[j] = [ dataA[i].x, dataA[i].y, dataB[i].y ];
            under[j] = [ dataA[i].x, dataB[i].y, dataB[i].y ];
        } else if (dataA[i].y == dataB[i].y) { 
            dir = 0;
            over[j] = [ dataA[i].x, dataA[i].y, dataA[i].y ];
            under[j] = [ dataA[i].x, dataA[i].y, dataA[i].y ];
        } else { 
            if (dir == 1) { 
            over[j] = under[j] = getIntersection(dataA[i-1], dataA[i], 
                                                 dataB[i-i], dataB[i]);             
                j++;
            }
            dir = -1;
            over[j] = [ dataA[i].x, dataB[i].y, dataB[i].y ];
            under[j] = [ dataA[i].x, dataB[i].y, dataA[i].y ];
        }    
        j++;
    }
    chart.series[0].setData(over, refresh);
    chart.series[1].setData(under, refresh);
}

Fiddle

注意有时这似乎陷入了困境，我不知道为什么。

你可以在小提琴中看到线交叉功能，它从维基百科中解脱出来。这有两个问题，首先是没有合理的事件来附加这个功能 - 在它附加到load和redraw的小提琴中。但是你无法从redraw事件中开始重绘（这是有意义的）所以显示的阴影将始终是绘图线后面的一组数据 - 如果你切换缩放设置这很明显例如。但是，如果您准备编辑Highchart源代码并在其中添加一个钩子，则允许您在分组后但在最终渲染之前附加更新功能，这应该是相当容易解决的。

为什么阴影仍然不对？要么我的线路交叉逻辑错误，要么在处理非常小（准确）的数字和非常大的数字时要准确。或者它只是一个高图表限制。

另一个可能看起来不正确的选项是使用redraw和Renderer类，直接将阴影区域作为SVG路径绘制到图形上。

如果我想出其他任何我会再次编辑的内容 - 但我认为我没有想过如何做到这一点。

编辑2

好的，我认为正确的＆＃39;这样做的方法可能是修改Highcharts本身并使用它自己的渲染器创建一个新的图表类型（因此它是一个扩展区域图表，知道要改变交叉上的颜色并绘制线条用不同的颜色）。我不知道那有多容易。

但是，直接在图形上绘制SVG路径的黑客实际上工作正常，我们已经拥有此页面上其他示例的所有逻辑，因此更新图表功能可能如下所示：

var over_path = null;
var under_path = null;
function updateChart(chart) {

    // Create the paths on the first call ...
    if (!over_path) {
        over_path = chart.renderer.path();
        over_path.attr({fill: '#bbeebb'}).add();
    }
    if (!under_path) {        
        under_path = chart.renderer.path();
        under_path.attr({fill: '#eebbbb'}).add();     
    }

    // Get the data from the chart
    aPts = chart.series[0].points;
    bPts = chart.series[1].points;

    var i; 
    var overPts = Array();    // SVG path instructions
    var underPts = Array();   
    var mX = chart.plotLeft;  // Offset for each point
    var mY = chart.plotTop;
    var iPt;                  // For the intersection points

    // Draw the path along line B, than back along A/B 
    // to complete a closed space. First go along B

    overPts[0] = underPts[0] = 'M'; // Move to start
    overPts[1] = underPts[1] = bPts[0].plotX + mX;
    overPts[2] = underPts[2] = bPts[0].plotY + mY;
    overPts[3] = underPts[3] = 'L'; // Draw from here
    for (i=1; i<aPts.length; i++) { 
        overPts[overPts.length] = underPts[underPts.length] = bPts[i].plotX + mX;
        overPts[overPts.length] = underPts[underPts.length] = bPts[i].plotY + mY;
    }

    // Now go backwards along A looking for the cross-overs ...    
    var dir = 0;    
    var newDir = 0;
    for (i=(aPts.length - 1); i>=0; i--) { 
        var A = aPts[i].plotY + mY;
        var B = bPts[i].plotY + mY;

        newDir = (A>B)?1:((A<B)?-1:0);
        if (dir && (dir != newDir)) {
            // Change direction, add intersect point
            iPt = getIntersection(aPts[i], aPts[i+1], bPts[i], bPts[i+1]);
            overPts[overPts.length] = underPts[underPts.length] =iPt.plotX + mX;
            overPts[overPts.length] = underPts[underPts.length] = iPt.plotY + mY

        }
        dir = newDir;

        // Add matching data point 
        overPts[overPts.length] = aPts[i].plotX + mX;
        underPts[underPts.length] = aPts[i].plotX + mX;
        if (A > B) { 
            overPts[overPts.length] = B;
            underPts[underPts.length] = A;
        } else { 
            overPts[overPts.length] = A;
            underPts[underPts.length] = B;
        }        
    }        

    // Update new path
    over_path.attr({'d': overPts});
    under_path.attr({'d': underPts});

}

Fiddle

注意：在这里，我正在阅读图表对象的未记录内容，以确定各点的位置，因为在官方API中它们不会在将来发生变化Highcharts的版本（虽然，它们可能不会 - 但是要注意这种可能性是很好的）。

主要问题是区域出现在初始图形绘制动画之前，但你可能找到一种方法（你可以在第一次淡化它可能看起来很酷）。由于进一步的重绘不是动画，因此它不是问题。还有一些“模糊”和＃fu;在一些视图中，我认为是由于抗锯齿，所以你可能想要调整它。

除非有不同的图表包进行可以考虑线交叉的数据分组，否则我认为上述可能是最好的解决方案，不涉及深入研究图表包的来源。 / p>

无论如何，感谢本周占据我心中的有趣问题。 :)

Answer 2

您可以使用四个，两个线和两个阴影（arearange），而不是使用两个线系列，例如http://jsfiddle.net/tRpMQ/5/