0
255
Visualizaçõescómo personalizar la información sobre herramientas flotante
Tengo una parcela que tiene múltiples curvas como se muestra en el archivo adjunto.
var data = [ { type: 'scatter', mode: 'lines+markers', name: 'Main.app.folder.section31.floor17.room8.box56.label6.nameA', x: [1,2,3,4,5], y: [2.02825,1.63728,6.83839,4.8485,4.73463], showlegend: false }, { x: [1,2,3,4,5], y: [3.02825,2.63728,4.83839,3.8485,1.73463], name: 'Main.app.folder.section31.floor17.room8.box56.label6.different', showlegend: false }, { type: 'scatter', mode: 'lines+markers', name: 'Main.app.folder.section31.floor17.room8.box56.label6.unknown', x: [1,2,3,4,5], y: [5.02825,4.63728,3.83839,2.8485,0.73463], hovertemplate: '(%{x},%{y})', showlegend: false }, ]; var layout = { title: "Set hover text with hovertemplate", }; Plotly.newPlot('myDiv', data, layout);https://codepen.io/mmakrzem/pen/mdOpWLd
Cada una de las curvas tiene un nombre muy largo, así que me gustaría personalizar la plantilla flotante para que muestre (x, y)...
Para mi ejemplo, esperaría ver algo como ...bel6.nameA o ...different o ...l6.unknown . Mientras que en este momento Main.app.fol... para todas las parcelas, así que no puedo diferenciarlas. También intenté establecer la plantilla flotante en solo (x, y), pero luego se muestra el nombre completo y eso es ridículamente largo.
1 Respostas
Responde à pergunta0
Para cada seguimiento, puede agregar la cadena que desea mostrar usando el argumento customdata y establecerlo igual a una matriz de cadenas de la misma longitud que las matrices x e y que pasa a cada seguimiento (por ejemplo, customdata: Array(5).fill('...nameA') ).
Luego, puede modificar la hovertemplate para incluir %{customdata} y ocultar completamente el nombre de rastreo largo agregando la cadena <extra></extra> .
Su plantilla flotante se verá así: '%{x},%{y} %{customdata}<extra></extra>'
Mi codepen está aquí si quieres echarle un vistazo.
var data = [ { type: 'scatter', mode: 'lines+markers', name: 'Main.app.folder.section31.floor17.room8.box56.label6.nameA', x: [1,2,3,4,5], y: [2.02825,1.63728,6.83839,4.8485,4.73463], customdata:Array(5).fill('...nameA'), hovertemplate: '%{x},%{y} %{customdata}<extra></extra>', showlegend: false }, { x: [1,2,3,4,5], y: [3.02825,2.63728,4.83839,3.8485,1.73463], name: 'Main.app.folder.section31.floor17.room8.box56.label6.different', customdata:Array(5).fill('...different'), hovertemplate: '%{x},%{y} %{customdata}<extra></extra>', showlegend: false }, { type: 'scatter', mode: 'lines+markers', name: 'Main.app.folder.section31.floor17.room8.box56.label6.unknown', x: [1,2,3,4,5], y: [5.02825,4.63728,3.83839,2.8485,0.73463], customdata:Array(5).fill('...unknown'), hovertemplate: '%{x},%{y} %{customdata}<extra></extra>', showlegend: false }, ]; var layout = { title: "Set hover text with hovertemplate", }; Plotly.newPlot('myDiv', data, layout); 