Hasta ahora tengo este código `
shapes: [ { type: "line", xref: "x", yref: "paper", x0: data[i], y0: 0, x1: data[i], y1: 1, line: { color: "red", width: 2, dash: "longdash", }, }, ],Quiero configurar una línea vertical en mi gráfico en una posición específica y esto funciona bien. Ahora, ¿cómo puedo hacer más de la misma línea? porque mi matriz de datos se actualizará después de un botón. Si solo hay un punto en mi matriz, obtengo una línea, pero si intento configurar una segunda línea, simplemente no funcionará. ¿Puedo de alguna manera hacer un bucle for para trazarme esas líneas? solo quiero trazar más de un carril vertical en diferentes lugares.
Puede construir shapes como una matriz que contiene varios diccionarios: algo en la forma [{shape 1 info}, ..., {shape N info}] . Para hacer eso, puede recorrer su matriz de data y usar data[i] como las coordenadas x de cada línea en su matriz de shapes .
Aquí hay un código de muestra y el codepen .
var data = [1,2,3,5] shapes = [] for (let i = 0; i < data.length; i++) { shapes.push({ type: "line", xref: "x", yref: "paper", x0: data[i], y0: 0, x1: data[i], y1: 1, line: { color: "red", width: 2, dash: "longdash", }, }) } var trace1 = { x: [2, 6], y: [1, 2], mode: 'markers+lines' }; var layout = { title: 'Vertical Line Annotations', xaxis: { range: [0, 7] }, yaxis: { range: [0, 6] }, shapes: shapes }; var plotdata = [trace1]; Plotly.newPlot('myDiv', plotdata, layout);