Javascript 在PlotlyJS中的特定Y值上方填充/着色图表

我想在PlotlyJS中填充一个特定的Y值。这是我从PlotlyJS文档中得到的：

在文档中，似乎有两个选项：

tonexty

-填充如下。问题是“tonexty”有点局限性-用例是“填充到线条”，因此阴影仅在110以上。例如：

tozeroy

-填充至零：

此外，是否需要引入新的跟踪以创建填充

这意味着：我需要引入另一个跟踪来创建填充。也许我在文档中遗漏了什么，或者这完全是错误的方法。

---

那么，如何在PlotlyJS中的特定Y值上方填充轨迹中的区域呢？

解决方案是使用多个轨迹。
将所有记录道分为高于0的记录道和不高于0的记录道。
完成后，您可以（或不）用“tozeroy”值填充它们

下面显示了一个工作示例

代码如下：

HTML:

<div id="myDiv" style="width:600px;height:250px;"></div>

结果如下所示：

---

这里是另一个利用Plotly的

填充的解决方案：“toself”

。其思想是创建一个封闭的线轨迹，该轨迹包围阈值上方的区域和主线的标记。适用于高于零的阈值和数值x值

辅助轨迹隐藏其图例，并与主轨迹分组，从而防止在切换图例时出现丑陋的瑕疵

如果y值高于阈值（如果是），该函数将检查每个x-y对

• 检查是否已经有一个段高于阈值，并使用此段或创建一个新段
• 该分段从阈值的y值开始，中间的x值从阈值以上的点开始，中间的x值从阈值之前的点开始
• 每个线段以y值终止，y值等于threshol，x值等于线段中最后一点和下一点的平均值

函数本身当然可以用更好的方式编写，但它只是概念的证明

function dataToTraces（数据，阈值）{
var=[]；
var emptyFiller={
x:[]，
y:[]，
填充：“toself”，
模式：“行”，
行：{
宽度：0
},
不透明度：0.5，
填充颜色：“8adcb3”，
showlegend:false，
传奇集团：“主要”
}
填料。推动（排空填料器）；
对于（变量i=0；i=阈值）{
如果（i！==0&&data.y[i-1]<阈值）{
fillers[fillers.length-1].x.push（data.x[i-1]+（threshold-data.y[i-1]）/（data.y[i]-data.y[i-1]）；
fillers[fillers.length-1].y.push（阈值）；
}
fillers[fillers.length-1].x.push（data.x[i]）；
fillers[fillers.length-1].y.push（data.y[i]）；
}else if（fillers[fillers.length-1].x.length>0）{
if（i！==0&&data.y[i-1]！==threshold）{
fillers[fillers.length-1].x.push（data.x[i-1]+（threshold-data.y[i-1]）/（data.y[i]-data.y[i-1]）；
fillers[fillers.length-1].y.push（阈值）；
}
填料。推动（排空填料器）；
}
}
回流填料；
}
风险值数据=[{
x:[0,1,2,3,4,5,6,7,8],，
y:[1,3,6,2，-1,5,1,3,0]，
名称：“主要”，
传奇集团：“主要”
}];
var fillers=dataToTraces（数据[0]，2）；
Plotly.newPlot（“myDiv”，data.concat（fillers））

更严重的是，实际上，因为我只是在玩plotly库，所以我无法给您提供更好的解决方案。我很好奇如何用一个更优雅的解决方案来实现这一点。这是一个非常好的解决方案。我也没有想出更优雅的。你可以使用legendgroup让传奇更加美丽，但仅此而已。但更关键的是：问题是“高于特定的Y值”。我认为这对你的解决方案不起作用，或者我遗漏了什么？这是一个很好的解决方案，但你能更详细地解释一下你在做什么吗？@user3886058我添加了一些解释，希望现在更清楚
<div id="myDiv" style="width:600px;height:250px;"></div>

var data = [
  {
    x: ['A', 'B', 'C', 'D'],
    y: [1, 3, 6, 0],
    fill: 'tozeroy',
    fillcolor: '#8adcb3'
  },
  {
    x: ['D', 'F', 'G', 'I'],
    y: [0, -3, -2, 0],
    fill: 'toself'
  },
   {
    x: ['I', 'J', 'K'],
    y: [0, 5, 7],
    fill: 'tozeroy',
    fillcolor: '#0adcb3'
  }
];

Plotly.newPlot('myDiv', data);