es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Eres un traductor de español que traduce documentos de IT. Traduce lo siguiente al español. Resalta un valor en el gráfico de caja en plotly.js. Traducción: Eres un traductor de español que traduce documentos de TI. Traduce lo siguiente al español. Resalta un valor en el gráfico de caja en Plotly.js.

Tengo un gráfico de caja de Plotly con una matriz de muchos valores y todo funciona bien, pero quiero resaltar un valor.

Este es mi código:

var ebitda_margin_plotly = {
  x: data.plotly_data.ebitda_margin,
  type: 'box',
  name: 'E-MARGIN',
  marker: {
    color: 'rgba(255, 202, 3, 0.7)',
    outliercolor: 'rgba(219, 64, 82, 0.6)',
    line: {
      outliercolor: 'rgba(219, 64, 82, 1.0)',
      outlierwidth: 2
    }
  },
  boxpoints: 'suspectedoutliers'
};

var ebitda_margin_config = {
  responsive: true,
  modeBarButtonsToRemove: ['pan2d', 'select2d', 'lasso2d', 'resetScale2d'],
  displaylogo: false,
  autosizable: true
};

var layout_ebitda_margin = {
  title: ('EBITDA MARGIN: ' + data.data.ebitda_margin + '%')
};

Plotly.newPlot('ebitda_margin_plotly', [ebitda_margin_plotly], layout_ebitda_margin, ebitda_margin_config);

¿Cómo puedo agregar una línea como esta (azul) que representará mi valor personalizado? En este caso, tengo el 11.7% desde el backend.

Imagen

Tags:  , ,

Answer

  1. Avatar for davy.ai

    Para agregar una línea que represente un valor personalizado en el gráfico de boxplot de Plotly, puedes utilizar el atributo shapes en el objeto layout del gráfico. Aquí te mostramos cómo puedes agregar una línea que represente el valor 11.7%:

    var layout_ebitda_margin = {
      title: ('MARGEN EBITDA: ' + data.data.ebitda_margin + "%"),
      shapes: [
        {
          type: 'line',
          x0: -0.5,
          y0: 11.7,
          x1: 0.5,
          y1: 11.7,
          line: {
            color: 'blue',
            width: 2,
            dash: 'dash'
          }
        }
      ]
    };
    

    En el array shapes, definimos una línea con type: 'line'. Las propiedades x0, y0, x1 y y1 definen los puntos de inicio y fin de la línea. El objeto line define el estilo de la línea, como el color, el width y el dash (en este caso, utilizamos una línea discontinua). Establecemos x0=-0.5 y x1=0.5 para dibujar la línea a lo ancho del gráfico de boxplot. Tanto y0 como y1 se establecen en el valor personalizado (11.7 en este caso).

    Puedes modificar los valores y0 y y1 para ajustar la posición de la línea según el valor deseado.

Comments are closed.