Google Charts - html completo en información sobre herramientas

Question

Estoy tratando de hacer que Google Charts muestre información sobre herramientas personalizada con HTML completo en ellos.

Sé cómo habilitar la información sobre herramientas y pasar los datos apropiados - el problema es que incluso cuando está habilitada la opción allowHTML, las informaciones sobre herramientas se muestran como texto sin formato, así que por ejemplo no puedo mostrar una imagen en la información sobre herramientas.

Aquí hay un pequeño ejemplo de lo que voy para:

Lo que tengo ahora:

lo que quiero:

Una forma de resolver este problema es desactivar las sugerencias, capturar eventos onmouseover y usar otra biblioteca (como cluetip) para mostrar información sobre herramientas en el cursor, pero me preguntaba si existe una forma más limpia y nativa de habilitar este tipo de funcionalidad en Google Charts.

También consulte mi otra pregunta sobre las imágenes como marcadores de puntos en los gráficos de Google.

Editar:

Mientras tanto he encontrado una muy buena y bastante barato (60 $ por licencia sitio web) biblioteca que cubre esta funcionalidad: Highcharts library

Como se puede ver en el ejemplo, es Es posible pasar una función que formateará la información sobre herramientas: con la suficiente facilidad, podríamos agregar una propiedad especial a cada punto de datos que contenga una url que podría usarse para cargar dinámicamente el contenido de la información sobre herramientas. Los tooltips pueden almacenarse en caché agregando una propiedad adicional a cada punto de datos en una serie. Lo he implementado de esta manera y funciona perfectamente.

Espero que la última edición ayude a alguien.

Answer 1

Google da un ejemplo here.

Tendrá que designar la columna para que sea sobre herramientas html:

data.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}}); 

También tendrá que pasar la opción correcta para su gráfico:

tooltip: {isHtml: true} 

He probado esto con la línea gráfica , y funciona.

Editar: También parece que (al menos para el gráfico de líneas) tiene que usar el chart wrapper para que esto funcione. No pude hacer que obedezca las opciones sin el envoltorio.

Answer 2

¡Esta característica era increíblemente oscura! La clave para mí, como se señaló anteriormente, fue agregar ", 'p': {'html': true}" cuando se utiliza 'addColumn()' para definir una información sobre herramientas; la opción 'dibujar()' 'información sobre herramientas: {isHtml: true}' por sí sola no es suficiente.

Es muy práctico el uso de una llamada de función para devolver la cadena HTML al crear el conjunto de 'graphItems' que se pasa a 'addRows()':

function myToolTip(row) { 
    return '<div style="white-space: nowrap; padding:5px;"><b>' + row.name + '</b><br>' + 
     '$' + row.worth + ' B, <b>' + _scope.sortBy + '</b>: ' + row[_scope.sortBy] + '</div>'; 
} 

var graphItems = []; 
angular.forEach(_scope.ForbesList, function(row, key) { 
    graphItems.push([key, row.worth, myToolTip(row)]); 
}); 

var data = new google.visualization.DataTable(); 
data.addColumn('number', 'Rank'); 
data.addColumn('number', 'Worth'); 
data.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}}); 
data.addRows(graphItems); 

Más aquí: https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#custom_html_content

Answer 3

Esto está trabajando actualmente para mí:

Paso 1: asegúrese de que ambas de estas configuraciones se encuentran en sus opciones de gráficos:

// This line makes the entire category's tooltip active. 
focusTarget: 'category', 
// Use an HTML tooltip. 
tooltip: { isHtml: true } 

Paso 2: añadir su información de herramienta una de las columnas de gráficos:

dataTable.addColumn({'type': 'string', 'role': 'tooltip' , 'p': {'html': true}}); 

Paso 3: En sus datos, añadir el HTML para su información de herramientas en la columna apropiada:

chartReading.push(chartSensorTooltip(obsDate, reading[1])); 

El método "chartSensorTooltip (date, number)" es un método JS que escribí para formatear correctamente el HTML para la información sobre herramientas de cada valor. No es necesario que escriba este tipo de método, pero como se sugirió anteriormente, hacerlo de esa manera hace que sea muy fácil formatear todas las sugerencias de herramientas de la misma manera.

cosa El FocusTarget es lo que me hizo tropezar. HTH alguien!

Answer 4

Tuve que agregar {p: {html: true}} a cada fila de datos en lugar de columna, así como la opción isHtml para todo el cuadro.