Заполните/Отметьте диаграмму выше определенного значения Y в PlotlyJS

Я хотел бы заполнить до определенного значения Y в PlotlyJS. Это насколько я получил от документов PlotlyJS: Fiddle

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

В документации есть два варианта:

tonexty - заполняется, как показано ниже. Проблема в том, что "tonexty" немного ограничена. Вариант использования "заполняется до строки", поэтому затенение ТОЛЬКО выше 110. Пример:

tozeroy - Заполняется до нуля:

Кроме того, вам нужно ввести новую трассировку, чтобы создать заливку?

Это означает, что если у меня есть диаграмма следующим образом (только с одной дорожкой, но пороговая линия как форма): мне нужно представить другой след только для создания заливки. Возможно, там что-то я пропустил в документах, или это совсем не тот подход.

Итак, как вы заполняете область в трассе выше определенного значения Y в PlotlyJS?

Ответ 1

Решение состоит в использовании нескольких следов.
Разделите все свои следы между единицами, которые выше 0, а те, которые не являются.
Когда вы закончите, вы можете заполнить их (или нет) значением "tozeroy".

следующий за 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);

Результат выглядит следующим образом:

Ответ 2

Вот еще одно решение, использующее Plotly fill: "toself". Идея состоит в том, чтобы создать близкую линейную трассировку, которая охватывает область выше порога и маркеры главной линии. Работает для пороговых значений выше нуля и для числовых значений x.

Вспомогательные трассы имеют свою легенду скрытыми и сгруппированы с основным следом, тем самым предотвращая уродливые артефакты при переключении легенды.

Сама функция может быть, безусловно, написана лучше, но это просто доказательство концепции.

function dataToTraces(data, threshold) {

  var i = 0;
  var fillers = [];
  fillers.push({
    x: [],
    y: [],
    fill: "toself",
    mode: "lines",
    line: {
      width: 0
    },
    opacity: 0.5,
    fillcolor: "#8adcb3",
    showlegend: false,
    legendgroup: "main"
  });
  for (i = 0; i < data.y.length; i += 1) {
    if (data.y[i] >= threshold) {
      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(threshold);
      }
      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(threshold);
      }
      fillers.push({
        x: [],
        y: [],
        fill: "toself",
        mode: "lines",
        line: {
          width: 0
        },
        opacity: 0.5,
        fillcolor: "#8adcb3",
        showlegend: false,
        legendgroup: "main"
      });
    }
  }
  return fillers;
}

var data = [{
  x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  y: [1, 3, 6, 2, -1, 5, 1, 3, 0],
  name: "main",
  legendgroup: "main"
}];
var fillers = dataToTraces(data[0], 2);

Plotly.newPlot("myDiv", data.concat(fillers));

<div id="myDiv"></div>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>