Me gustaría poder usar mi propio CSS en los elementos del gráfico gráfico, especialmente en la etiqueta <div> más externa. Ahora mismo, sin embargo, el elemento se crea sin una ID. ¿Hay alguna manera de agregar un nombre de identificación HTML a <div> ? Con suerte, sería cuando creo la trama en python, o cuando agrego la trama a mi página usando javascript. Traté de hacer un ejemplo mínimo verificable a continuación, pero puedo hacer "ejecutar fragmento de código" porque necesitaría incluir el volcado gigante de JSON.
Estoy usando el matraz para mostrar el resultado de esto, pero no he incluido el código para la aplicación del matraz. Para realizar pruebas, básicamente puede copiar más allá de los volcados JSON del código de Python ( html_out ) en el HTML (ver más abajo).
Código Python
import plotly.graph_objects as go import plotly import numpy as np import json x = np.arange(10) fig = go.Figure(data=go.Scatter(x=x, y=x**2)) html_out=json.dumps(fig , cls=plotly.utils.PlotlyJSONEncoder)HTML
<html> <head> <script src='https://cdn.plot.ly/plotly-latest.min.js'></script> </head> <style> .plotContainer{ margin: 2px; border: 2px solid black; border-radius: 20px; padding: 10px ; overflow: hidden; position:relative; background:#34e8eb; width:-moz-fit-content; width: fit-content; } </style> <body> <div id = "rollingPermitContainer" class ="plotContainer"> <div id="rollingPermitChart" class="chart"></div> </div> </body> <script> var rolling_permit_fig = //**Put JSON dump here **; Plotly.newPlot ('rollingPermitChart',rolling_permit_fig,{}); </script>Encontré una solución pero no responde completamente la pregunta. En mi pregunta, quiero agregar una ID a <div> para poder acceder a ella con mucha precisión. Sin embargo, si esto no es posible, puede acceder a las clases user-select-none svg-container para el div más externo y main-svg para el fondo principal de la figura. Pude establecer la propiedad del radio del borde con
<script> var plotSVG = document.getElementsByClassName('main-svg') plotSVG[0].style.borderRadius = "20px"; </script> cuál era mi objetivo en el acceso en el <div> .
El tema es que en algunas de mis páginas tengo muchas tramas de Plotly. Aunque podría acceder a ellos indexando los elementos getElementsByClassName , creo que esto podría generar errores en el futuro, y sería mejor tener la ID del <div> externo.