Javascript 基于差异的两条线之间的颜色区域

我有一张有两条线的图表，我想根据哪条线在另一条线的上方来给它们之间的区域上色

此图显示收入和结果，因此，如果收入大于结果，则该区域为绿色，但如果结果大于收入，则该区域变为红色

我找不到在Highcharts中这样做的好方法。我试过面积图，但它们只是从零到直线上色

我希望这幅图片能有所帮助，并且有人知道如何做到这一点

非常感谢

我的两个数据集只是两个简单的数组，比如

let income = [0, 0, 0, 0, 1000, 1000, 2000, 5000, 9000]
let outcome = [0, 0, 0, 0, 0, 7000, 7000, 7000, 12000]

通过使用，您可以沿所需轴在给定位置更改颜色。以下是语法：

series: {
    name: 'Income',
    data: data,
    zoneAxis: 'x',
    zones: [{value: 1, fillColor: 'green'}, 
            {value: 5, fillColor: 'red}
            ]
}

该代码段为您提供了两个区域，绿色到1，红色从1到5。由于手动操作并不十分有趣，我制作了一个自动执行此操作的示例，请参见fiddle或文章底部：

最后，您会看到一个

arearange

图形，如下所示：

我在highstock中这样做了，但是如果您更喜欢使用highchart，那么它应该使用相同的代码，尽管看起来有点不同

您可能会尝试更改为

areasplinerange

（看起来更好）。但是使用样条曲线很难找到相交点，因此很难正确地为图形着色

让收入=[0,0,0,1000,1000,2000,5000,9000,12000,12000,12000,5000,4000,10000]
让结果=[0,0,7000,0,7000,7000,12000,9000,9000,9000,5000,5000]
//创建一个函数以查找直线相交的位置，并为其正确着色
函数相交（x1，x2，y1，y2，y3，y4）{
返回（（x2*y1-x1*y2）-（x2*y3-x1*y4）/（y4-y3）-（y2-y1））；
}
var范围=[]//存储图形的所有数据，如so[x，y1，y2]
var收益率=[]//根据直线相交的位置存储不同的分区
var incomeBiggerBool=真//用于跟踪当前颜色
//循环遍历收入和结果数组中的所有值（假定它们的长度相同）。填充范围数组并创建颜色区域。
//区域的颜色一直延伸到一个给定的点，因此我们需要在它相交之前，将颜色推到末端
对于（i=0；i结果[i]&&！incomeBiggerBool）{
收入区({
值：相交（i-1，i，收入[i-1]，收入[i]，结果[i-1]，结果[i]），
填充颜色：'#ED4337'//红色
})；//推送到区域数组
incomeBiggerBool=真；
}
}
//区域颜色达到给定点，因此我们也需要在末尾添加颜色：
if（incomeBiggerBool）{
收入区({
价值：收入。长度，
填充颜色：'#C0D890'//绿色
})
}否则{
收入区({
价值：收入。长度，
填充颜色：'#ED4337'//红色
})
}
var chart=Highcharts.stockChart（'容器'{
图表：{
类型：“区域范围”
},
学分：{
已启用：false
},
出口：{
已启用：false
},
范围选择器：{
已启用：false
},
滚动条：{
已启用：false
},
导航器：{
已启用：false
},
xAxis：{
可见：假
},
标题：{
文本：“示例”
},
打印选项：{}，
工具提示：{
//更漂亮的工具提示：
pointFormatter:函数（）{
返回“收入：”+this.low+”-支出：“+this.high+”
}
},
系列：[{
姓名：'收入'，
数据：范围，
分区轴：“x”，
区域：收入区
}]
});