es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo personalizar el tooltip de desplazamiento

11 Jun, 2023 Programación

Tengo una gráfica con 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: "Establecer texto emergente con hovertemplate",
};

Plotly.newPlot('myDiv', data, layout);

Cada una de las curvas tiene un nombre muy largo, así que me gustaría personalizar el hovertemplate para que muestre (x,y) …. Para mi ejemplo, esperaría ver algo como …bel6.nameA o …diferente o …l6.desconocido. Mientras tanto, en este momento obtengo Main.app.fol… para todas las gráficas, por lo que no puedo diferenciarlas. También intenté establecer el hovertemplate como solo (x, y), pero entonces se muestra todo el nombre y eso es simplemente ridículamente largo.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para personalizar el hovertemplate y que muestre (x,y) seguido de la cola del nombre de cada curva, puede agregar la siguiente línea al objeto de diseño:

    hovermode: 'closest',

    Esto asegurará que la información sobre herramientas muestre el punto más cercano al cursor del mouse y también le permitirá acceder al nombre de cada curva individualmente.

    Luego, puede actualizar el hovertemplate para cada curva agregando %{text} a la cadena y estableciendo la propiedad text en la cola deseada del nombre de la curva:

    {
    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,
    text: '...bel6.nameA',
    hovertemplate: '(%{x},%{y}) %{text}'
},

    El código resultante se verá así:

    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,
        text: '...bel6.nameA',
        hovertemplate: '(%{x},%{y}) %{text}'
    },
    {
        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,
        text: '...different',
        hovertemplate: '(%{x},%{y}) %{text}'
    },
    {
        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}) %{text}',
        text: '...l6.unknown'
    },

];

var layout = {
    title: "Establecer texto de información sobre herramientas con hovertemplate",
    hovermode: 'closest'
};

Plotly.newPlot('myDiv', data, layout);

    Esto le permitirá diferenciar entre las curvas mostrando solo la cola del nombre de cada curva en la información sobre herramientas.

Comments are closed.