0
304
VistasPlotly.js: superposición de dos gráficos diferentes con el mismo eje x y diferentes escalas del eje y
Tengo un escenario en mi aplicación mientras uso Plotly.js donde necesito superponer dos gráficos de líneas diferentes en el mismo plano, con el mismo eje x y diferentes escalas del eje y, apilados uno encima del otro como se muestra en la imagen abajo. Me imagino que se verá algo como esto: 
Me podrías ayudar con como hacer esto. Gracias
1 Respuestas
Responde la pregunta0
Puede crear un eje y secundario, luego establecer el rango de los ejes primario y secundario de manera diferente, y también establecer qué marcas de verificación se muestran para cada uno de los ejes. Para hacer las cosas un poco más generales, incluí una función que crea matrices espaciadas linealmente que puede usar para marcas de verificación y algunos factores de escala para el mínimo y el máximo de los rangos del eje y.
Puede ver el codepen aquí .
function linspace(start, stop, num, endpoint = true) { const div = endpoint ? (num - 1) : num; const step = (stop - start) / div; return Array.from({length: num}, (_, i) => start + step * i); } var yaxis_data = [40, 50, 60]; var yaxis2_data = [4,5,6]; var yaxis_data_min = Math.min(...yaxis_data); var yaxis_data_max = Math.max(...yaxis_data); var yaxis2_data_min = Math.min(...yaxis2_data); var yaxis2_data_max = Math.max(...yaxis2_data); var yaxis_data_range = [0.5*yaxis_data_min, yaxis_data_max]; var yaxis2_data_range = [yaxis2_data_min, 1.5*yaxis2_data_max]; var yaxis_ticks = linspace(yaxis_data_min, yaxis_data_max, 3) var yaxis2_ticks = linspace(yaxis2_data_min, yaxis2_data_max, 3) var trace1 = { x: [1, 2, 3], y: yaxis_data, name: 'yaxis data', type: 'scatter' }; var trace2 = { x: [2, 3, 4], y: yaxis2_data, name: 'yaxis2 data', yaxis: 'y2', type: 'scatter' }; var data = [trace1, trace2]; var layout = { title: 'Double Y Axis Example', yaxis: { title: 'yaxis title', range: yaxis_data_range, tickvals: yaxis_ticks }, yaxis2: { title: 'yaxis2 title', titlefont: {color: 'rgb(148, 103, 189)'}, tickfont: {color: 'rgb(148, 103, 189)'}, overlaying: 'y', side: 'right', range: yaxis2_data_range, tickvals: yaxis2_ticks } }; Plotly.newPlot('myDiv', data, layout); 