Plotly es una biblioteca gratuita y de código abierto que proporciona un amplio soporte para una amplia gama de tramas.
Sin embargo, notará que Plotly incluye la barra de modos en la esquina superior derecha de cada trama. Aunque esto puede ser beneficioso para acciones rápidas, como la exportación de la trama a un archivo de imagen, también puede conducir a una mala navegación y visibilidad, especialmente en pantallas más pequeñas.
Afortunadamente, Plotly nos permite eliminar la barra de modo o elementos específicos de la barra de modos como vemos en forma. En este tutorial, aprenderemos cómo podemos personalizar la barra de modos en la trama utilizando el parámetro de diseño.
Gráfico
Comencemos ilustrando la barra de modos en figuras complementarias. En nuestro ejemplo, crearemos una trama de línea simple usando Plotly.js.
Comience creando un documento HTML y llámelo Line_plot.html.
Luego podemos agregar el código HTML Boilerplate y agregar el título y trazar.Biblioteca JS. Un código de ejemplo es como se muestra a continuación:
Una vez creado, navegue al cuerpo del documento HTML y cree un elemento DIV. Dale una identificación de "mydiv". Esto nos permitirá usar el elemento div y trazar la figura.
Un código de ejemplo es como se muestra:
Finalmente, abra una etiqueta de script y agregue el código como se muestra a continuación:
var traza1 =En el ejemplo anterior, creamos un gráfico de línea simple utilizando datos de muestra. El código anterior debe dar como resultado la figura que se muestra a continuación:
Tenga en cuenta que el gráfico anterior incluye el ModeBar de forma predeterminada. Discutamos ahora cómo podemos deshabilitar todo o elementos de la barra de modos.
Tramly deshabilitar MODOBAR
Para eliminar la barra de modos completa de una gráfica específica, podemos usar el parámetro de diseño. Un código de ejemplo es como se muestra a continuación:
… .código truncado .. .En el ejemplo anterior, comenzamos definiendo el objeto de diseño que contiene las propiedades que deseamos personalizar. En nuestro ejemplo, establecemos el título de la figura utilizando la propiedad del título.
A continuación, establecemos el SplowBar en FALSE en la función NewPlot (). El código anterior debe dar como resultado la figura como se muestra a continuación:
Notarás que la barra no aparece incluso cuando nos desplazamos.
Tramly eliminar el logotipo de trazado
En algunos casos, es posible que desee preservar la barra de modos, pero elimine el logotipo "producido con trama".
Para eso, podemos establecer la propiedad DisplayLogo en falso como se muestra:
Tramamente.newPlot ("myDiv", datos, diseño, displayLogo: false);Si ejecutamos el código anterior, deberíamos ver la figura con ModeBar pero el logotipo está oculto:
Como podemos ver, la figura ya no contiene el logotipo producido con el logotipo de la trama.
Botones de eliminación de MODEBAR
Puede pasar los nombres de los botones que desea eliminar como una matriz a la propiedad ModeBarButtonStoreMove para eliminar los botones específicos de ModeBar.
Considere la figura a continuación antes de eliminar los botones.
Aquí, podemos ver que ModeBar tiene todos los botones
Para eliminar la 'Toimage', Zoom, Zoom y Zoom Out Botones. Podemos ejecutar el código como:
Tramamente.newPlot ("myDiv", datos, diseño, modeBarButtonStoreMove: ['ToImage', 'Zoom2d', 'Zoomin2d', 'ZoUmout2d']);En el ejemplo anterior, eliminamos los botones de ToImage, Zoom, Oward y Obout Out Out. La figura resultante es como se muestra:
Como podemos ver, los botones especificados no están disponibles desde ModeBar.
Conclusión
En este tutorial, aprendiste a personalizar la barra de modos en figuras complementarias. También cubrimos cómo ocultar y mostrar la barra de modos, eliminar los botones específicos de la barra de modos y cómo eliminar el logotipo "producido con trazado".