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

Question

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

{
  "x": [
    "2016-01-31T00:03:57.000Z",
    "2016-02-12T04:35:26.000Z"
  ],
  "y": [
    100,
    100
  ],
  "fill": "tonexty",
  "fillcolor": "#8adcb3"
}

在文档中，似乎有两种选择:

1. tonexty - 填充如下。问题是“tonexty”有点限制——用例是“填充到行”，所以阴影仅在 110 以上。示例:

1. tozeroy - 填充到零:

此外，您是否需要引入新轨迹才能创建填充？

这意味着 if I have a chart as follows (with only one trace but a threshold line as a shape) :我需要引入另一个轨迹只是为了创建一个填充。也许我在文档中遗漏了什么，或者这完全是错误的方法。

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

Answer 1

一个解决方案是使用多个跟踪。
在高于 0 的和不高于 0 的跟踪之间拆分所有跟踪。
完成后，您可以用“tozeroy”值填充(或不填充)它们。

following jsfiddle显示了一个工作示例。

代码如下:

HTML:

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

JS:

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);

结果如下: