javascript - 无法在 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 ]，并更清楚地看到这些差距。

看来您确实需要以某种方式在交叉点处添加数据点，但我不确定该怎么做。您不能只编辑数据，因为数据分组会更改它-但您无法在聚合函数中进行操作，因为您无法添加数据点。

您可以尝试保存绘制线条时生成的所有汇总数据点值，并使用该值插入带有推断出的额外数据点的面积图-但是我不清楚刷新刷新后如何工作图（我怀疑不会）。

编辑

我对更好的解决方案不满意，但仍然无法正常工作-也许您或其他人可以发现该缺陷。

基本上，如上所述，我们想为阴影曲线上的直线相交添加数据点，这是我的尝试-使用存储在“ dataGrouping”中的图表中的数据进行了分组后的数据：

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。

注意有时这似乎陷入一个循环，我不确定为什么。

您可以在小提琴中看到线相交功能，它是从Wikipedia提起的。这样做有两个问题，首先是没有明智的事件将此功能附加到-在提要中将其附加到 load和 redraw。但是您不能从 redraw事件内部开始重绘（这很有意义），因此显示的阴影始终是绘图线后面的一组数据-例如，如果切换缩放设置，这是显而易见的。但是，如果您准备编辑Highchart源代码并插入一个钩子，则可以很容易地对其进行修复，该钩子将允许您在分组之后但在最终渲染之前附加更新功能。

为什么阴影仍然不正确？要么我弄错了线相交逻辑，要么是当处理非常小的（准确的）数字和很大的数字时，它与准确性有关。或仅仅是图表的上限。

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

如果我提出其他建议，我将再次进行编辑-但我认为我没有办法做到这一点。

编辑2

好的，我认为做到这一点的“正确”方法可能是修改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版本中可能总是会更改（尽管它们可能不会更改-但这是很高兴知道这种可能性）。

主要问题是该区域出现在初始图形绘制动画之前，但是您可能会找到一种绕线方式（您可以在第一时间淡化它，看起来很酷）。由于不会进行进一步的重画，因此这不是问题。我认为某些视图中还存在一些“模糊性”，这是由于抗锯齿引起的，因此您可能需要对其进行调整。

除非有一个不同的图表程序包可以考虑线交叉点的数据分组，否则我认为以上可能是不涉及图表程序包来源的最佳解决方案。

无论如何，感谢这个星期引起我注意的有趣问题。 :)