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
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