Google Cartes d'html dans les info-bulles

Je suis en train de faire Google Tableaux d'Affichage des info-bulles personnalisées avec du HTML.

Je sais comment faire pour activer les info-bulles et de transmettre des données appropriées - le problème est le même quand allowHTML option est activée, les info-bulles sont rendus sous forme de texte brut, par exemple je ne peux pas afficher une image dans l'info-bulle.

Voici un petit exemple de ce que je vais pour:

Ce que j'ai maintenant: Google Cartes d'html dans les info-bulles

Ce que je veux: Google Cartes d'html dans les info-bulles

Une façon de résoudre ce problème est de désactiver les info-bulles, de capturer des événements onmouseover et utiliser une autre bibliothèque (comme cluetip) pour afficher les info-bulles à l'emplacement du curseur, mais je me demandais si il est un nettoyant, natif de manière à permettre à ce type de fonctionnalité dans Google Charts.

Aussi s'il vous plaît vérifier mes autres question sur les images comme des marqueurs de point dans google charts.

Edit:

En attendant, j'ai trouvé un très bon et assez peu coûteux (60$ par site web de licence) de la bibliothèque qui couvre cette fonctionnalité : Highcharts bibliothèque

Comme vous pouvez le voir dans l'exemple, il est possible de passer d'une fonction qui permet de formater les info-bulles - assez facilement nous pourrions ajouter une propriété particulière de chaque point de données contenant une url qui peut être utilisé pour dynammically charger le contenu des info-bulles. Les info-bulles peuvent alors être mis en cache par l'ajout d'un supplément de propriété pour chaque point de données dans une série. J'ai mis en place cette façon et ça fonctionne parfaitement.

Espère la dernière édition aider quelqu'un.

OriginalL'auteur JohnnyM | 2012-06-20

  1. 25

    Google donne un exemple ici.

    Vous devez désigner la colonne à html info-bulle:

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

    Vous aurez aussi besoin de transmettre la bonne option pour votre graphique:

    tooltip: {isHtml: true}

    J'ai testé cela avec ligne graphique, et ça fonctionne.

    Edit: aussi, Il semble que (au moins pour la ligne graphique de), vous devez utiliser le graphique wrapper pour que cela fonctionne. Je ne pouvais pas le faire obéir les options sans l'emballage.

    Cette fonctionnalité, HTML info-bulle, a été récemment publié sur 9/24/2012. (developers.google.com/chart/interactive/docs/...)

    OriginalL'auteur dmeehl

  2. 3

    Cette fonctionnalité a été incroyablement obscur! Pour moi, l'essentiel, comme l'a noté plus haut, a été l'ajout de ", 'p': {'html': true}" lors de l'utilisation de 'addColumn()' pour définir une info-bulle; le "draw () "option" info-bulle: {isHtml: true}' seul n'est pas suffisant.

    Il est très pratique d'utiliser un appel de fonction de retour de la chaîne HTML lors de la création de la matrice de 'graphItems' qui est passée de " 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);

    Plus ici:
    https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#custom_html_content

    OriginalL'auteur Joseph Oster

  3. 3

    C'est actuellement en train de travailler pour moi:

    Étape 1: être certaines de ces DEUX paramètres se trouvent dans votre options du graphique:

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

    Étape 2: ajouter votre infobulle l'un des graphique en colonnes:

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

    Étape 3: Dans vos données, ajouter le code HTML de votre info-bulle dans la colonne appropriée:

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

    La méthode "chartSensorTooltip( date, numéro)" est une méthode JS que j'ai écrit moi-même pour formater correctement le HTML pour chacune des valeurs de pointe de l'outil. Vous n'avez pas besoin d'écrire ce genre de méthode, mais comme quelqu'un l'a suggéré ci-dessus, ce qui rend très facile pour le format de toutes les info-bulles de la même façon.

    La FocusTarget, c'est ce qui s'est déclenché moi. HTH quelqu'un!

    Wow! Le "focusTarget" n'était même pas à l'horizon pour moi. C'est juste ce dont j'avais besoin.

    OriginalL'auteur Blamkin86

  4. 0

    J'ai dû ajouter {p: {html: true}} pour chaque ligne de données au lieu de la colonne, ainsi que isHtml option pour l'ensemble du graphique.

    OriginalL'auteur Ryo