0
379
VistasCómo mostrar dos gráficos de Plotly uno al lado del otro en JavaScript
Quiero que aparezcan dos gráficos de Plotly uno al lado del otro en la misma línea. En este momento aparece un gráfico encima del otro.
Este es mi código JavaScript para los dos gráficos:
var barData = [ { x: x_names, y: y_data, text: y_names, marker: { color: 'rgba(202,210,211,.90)' }, type: 'bar', orientation: 'v', width: 0.8, options: { offset: true } }]; var barLayout = { title: "<b>Arrears Balance Managed by CSM</b>", showlegend: false, xaxis: { tickangle: 45, zeroline: true }, yaxis: { gridwidth: 1, zeroline: true }, height: 400, width: 500, }; Plotly.newPlot('bar', barData, barLayout); var donutData = [{ labels: y1_names, values: x1_data, hole: .4, type: "pie" }]; var donutLayout = { height: 400, width: 500, margin: {"t": 0, "b": 0, "l": 0, "r": 0}, showlegend: true } Plotly.newPlot('pie', donutData, donutLayout);Lo siguiente es de mi documento html:
<h3 class='display-4'>Graphs</h3> <div class="col-md-6"> <div id="bar"> </div> <div class="col-md-6"> <div id="pie"> </div>¿Hay alguna manera de hacer que los dos gráficos se alineen uno al lado del otro?
Gracias de antemano por tu ayuda.
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Si está utilizando un navegador moderno con su página web. Le sugiero que use el siguiente CSS: display: flex; . Aquí hay un enlace a una buena guía: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
También puedes ver el ejemplo que hice en el fragmento de código:
.graph-container { display: flex; } #bar { flex: 1; width: 50px; height: 50px; background-color: #FF0000; } #pie { flex: 1; width: 50px; height: 50px; background-color: #0000FF; } <h3 class='display-4'>Graphs</h3> <div class='graph-container'> <div id="bar"></div> <div id="pie"></div> </div>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta