2017-10-16 11 views
1

J'ai un graphique commun en utilisant google chart API. Ici, je veux mettre à jour la pointe de l'outil de la carte.Google chart: modifier tip toopl

Étant donné qu'il y a beaucoup de chevauchement dans ces diagrammes, il se peut que je ne puisse pas survoler chaque point discret et voir des données.

Répondre

1

vous pouvez utiliser un DataView pour fournir une colonne calculée
qui construit l'infobulle pour cette ligne

voir suivant extrait ...

var dataView = new google.visualization.DataView(joinedData); 
dataView.setColumns([0, 1, { 
    calc: function (dt, row) { 
    return getTooltip(dt, row); 
    }, 
    role: 'tooltip', 
    type: 'string', 
    p: { 
    html: true 
    } 
}, 2, { 
    calc: function (dt, row) { 
    return getTooltip(dt, row); 
    }, 
    role: 'tooltip', 
    type: 'string', 
    p: { 
    html: true 
    } 
}]); 

function getTooltip(dt, row) { 
    var tooltip = '<div class="tooltip">'; 
    tooltip += '<div>' + dt.getFormattedValue(row, 0) + '</div>'; 

    tooltip += '<div>' + dt.getColumnLabel(1) + '</div>'; 
    if (dt.getValue(row, 1) === null) { 
    tooltip += '<div>' + dt.getFormattedValue(row + 1, 1) + '</div>'; 
    } else { 
    tooltip += '<div>' + dt.getFormattedValue(row, 1) + '</div>'; 
    } 

    tooltip += '<div>' + dt.getColumnLabel(2) + '</div>'; 
    if (dt.getValue(row, 2) === null) { 
    if (row > 0) { 
     tooltip += '<div>' + dt.getFormattedValue(row - 1, 2) + '</div>'; 
    } 
    } else { 
    tooltip += '<div>' + dt.getFormattedValue(row, 2) + '</div>'; 
    } 

    tooltip += '</div>'; 
    return tooltip; 
} 

complet snippet ->http://jsfiddle.net/sqdfrf8f/1/


Note: il y a une sorte de bug,
en ce que le tableau ne respectera pas les propriétés des colonnes sur les vues de données
donc la propriété html ne soit pas mis
le travail est autour d'utiliser la méthode d'affichage des données ->toDataTable()

aussi: besoin d'utiliser la bibliothèque mise à jour pour les cartes Google, ->update library loader code

+1

les lignes dans les données affichées ici sont décalées, pas le cas dans le violon du commentaire, en tant que telle, aucun besoin d'ajuster l'index des lignes, voir cette mise à jour -> [http://jsfiddle.net/sqdfrf8f/5/](http://jsfiddle.net/sqdfrf8f/5/) – WhiteHat