javascript - Rellene/sombree un gráfico sobre un valor Y específico en PlotlyJS

plotly height

Question

Me gustaría rellenar hasta un valor de Y específico en PlotlyJS. Esto es lo más lejos que llegué de los documentos de PlotlyJS: Fiddle

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

En la documentación, parece haber dos opciones:

1. tonexty - Se llena como a continuación. El problema es que ''tonexty'' es un poco limitante. El caso de uso es ''llenar hasta la línea'', por lo que el sombreado SOLO es 110. Ejemplo:

2. tozeroy - tozeroy hasta cero:

Además, ¿necesita introducir una nueva traza para crear un relleno?

Esto significa que si tengo un gráfico como el siguiente (con solo una traza pero una línea de umbral como una forma) : Necesito introducir otra traza solo para crear un relleno . Tal vez haya algo que no haya visto en los documentos, o este es el enfoque equivocado.

Entonces, ¿cómo rellenar un área en una traza sobre un valor Y específico en PlotlyJS?

Answer 1

Aquí hay otra solución que explota el fill: "toself" de Plotly fill: "toself" . La idea es crear un trazado de línea cerrada que encierre el área por encima del umbral y los marcadores de la línea principal. Funciona para valores de umbral por encima de cero y para valores x numéricos.

Las trazas de ayuda tienen su leyenda oculta y se agrupan con la traza principal, evitando así que aparezcan artefactos feos al alternar la leyenda.

La función comprueba cada par xy si el valor y está por encima del umbral, si es así

• verifique si ya hay un segmento por encima del umbral y use este O cree un nuevo sgement
• el segmento comienza desde el valor y del umbral y el valor x intermedio desde el punto por encima del umbral y el anterior.
• cada segmento se termina con un valor de y que es igual al threshol y el valor de x, que la media del último punto en el segmento y el siguiente

La función en sí misma se puede escribir de una manera más agradable, pero es solo una prueba de concepto.

function dataToTraces(data, threshold) {

  var fillers = [];

  var emptyFiller = {
    x: [],
    y: [],
    fill: "toself",
    mode: "lines",
    line: {
      width: 0
    },
    opacity: 0.5,
    fillcolor: "#8adcb3",
    showlegend: false,
    legendgroup: "main"
  }
  
  fillers.push(emptyFiller);

  for (var 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(emptyFiller);
    }
  }
  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>

Answer 2

Una solución es utilizar múltiples trazas.
Divide todas tus huellas entre las que están por encima de 0 y las que no lo están.
Cuando haya terminado, puede llenarlos (o no) con el valor ''tozeroy''.

El siguiente jsfiddle muestra un ejemplo de trabajo.

El código es el siguiente:

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

El resultado se ve como sigue: