plotly / plotly/plotly.js

Heatmaps with hovertemplate with %{text} is not working

Abierto
#6,689 2 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

bug P3
Lenguaje dominante
JavaScript
Estrellas
18.3k
Forks
2k
Merge medio
2 d 12 h
PR fusionados (30 d)
28

Descripción

The following works for scatter plot where you can see %{text} is being populated from the provided text:

<head>
	<!-- Load plotly.js into the DOM -->
	<script src='https://cdn.plot.ly/plotly-2.24.1.min.js'></script>
</head>

<body>
	<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>
var data = [
    {
        type: 'scatter',
        mode: 'lines+markers',
        x: [1, 2, 3],
        y: [2, 4, 6],
        z: [[1, 2, 3], [4, 5, 6], [7, 8, 9]],
        hovertemplate: '<i>Price</i>: $%{y:.2f}' +
                        '<br><b>X</b>: %{x}<br>' +
                        '<b>%{text}</b>',
        text: ["Text A", "Text B", "Text C"],
        showlegend: false
    }
];

var layout = {
    title: "Set hover text with hovertemplate",
};

Plotly.newPlot('myDiv', data, layout);
Screenshot 2023-07-27 at 2 42 53 PM

But the same doesn't work you generate a heatmap (the code is the same, except changed the type to heatmap):

var data = [
    {
        type: 'heatmap',
        mode: 'lines+markers',
        x: [1, 2, 3],
        y: [2, 4, 6],
        z: [[1, 2, 3], [4, 5, 6], [7, 8, 9]],
        hovertemplate: '<i>Price</i>: $%{y:.2f}' +
                        '<br><b>X</b>: %{x}<br>' +
                        '<b>%{text}</b>',
        text: ["Text A", "Text B", "Text C"],
        showlegend: false
    }
];

var layout = {
    title: "Set hover text with hovertemplate",
};

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

Screenshot 2023-07-27 at 2 45 52 PM

Would really appreciate some help on this.

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Línea de trabajo

Comienza ejecutando la reproducción proporcionada en HTML y JavaScript con Plotly 2.24.1 y, a continuación, compara el manejo de hovertemplate para los traces scatter y heatmap. Rastrea el comportamiento del hover de heatmap y su asignación de datos %{text}; se considera terminado cuando el texto proporcionado aparece en las etiquetas de hover de heatmap sin regresiones en el comportamiento de scatter.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
javascript
Área
data-visualization
Tipo de issue
Error
Dificultad
3/5
Tiempo estimado
1-2 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
45/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.