我有两条线，A我B尝试在它们之间绘制不同颜色的区域：绿色 whereA > B和红色 where A < B。我已经通过arearange系列类型实现了阴影区域。你可以在这里看到我的工作：http: //jsfiddle.net/kSNsT/
问题是：当数据分组发生时（即图表中的单点对应于我的情况超过一天），阴影变得疯狂。如果您在底部使用范围选择器缩小图表间隔，则阴影几乎是完美的。但是当你扩大它时，它会超出界限。
我尝试编写自己的处理程序，arearange.dataGrouping.approximation但并没有太大帮助。有任何想法吗？
这里有一个类似的问题，但该解决方案不适用于分组。
正如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);
}
小提琴。
注意有时这似乎陷入了一个循环，我不知道为什么。
您可以在小提琴中看到 line intersect 函数，它来自维基百科。这有两个问题，首先没有合理的事件可以将此函数附加到 - 在小提琴中它附加到loadand redraw。但是您不能从redraw事件内部开始重绘（这是有道理的），因此显示的阴影将始终是绘图线后面的一组数据 - 例如，如果您切换缩放设置，这很明显。但是，如果您准备编辑 Highchart 源代码并在其中放置一个挂钩，则应该相当容易解决这个问题，这将允许您在分组之后但在最终渲染之前附加更新功能。
为什么阴影仍然不正确？要么我的线交点逻辑错误，要么在处理非常小（准确）的数字和非常大的数字时与准确性有关。或者这只是一个高图表限制。
另一个可能看起来不正确的选项是使用redrawandRenderer类，直接将阴影区域作为 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});
}
注意：在这里，我正在阅读图表对象的未记录内容以计算出点的位置，因为这不在官方 API 中，它们可能总是在未来版本的 Highcharts 中更改（尽管它们可能不会 - 但它是很高兴意识到这种可能性）。
主要问题是该区域出现在初始图形绘制动画之前，但您可能会找到一种解决方法（您可以在第一次将其淡化，这可能看起来很酷）。由于进一步的重绘不是动画的，所以这不是问题。在某些视图中也存在一些“模糊”，我认为这是由于抗锯齿，因此您可能需要对其进行调整。
除非有一个不同的图表包可以考虑线交叉点进行数据分组，否则我认为以上可能是不涉及深入研究图表包源的最佳解决方案。
无论如何，感谢这周占据我脑海的有趣问题。:)
除了使用两行系列，您可以使用四、两行和两个阴影 ( arearange)，如示例http://jsfiddle.net/tRpMQ/5/