Comment personnaliser les infobulles (texte et Format) dans les graphiques à barres de Vizualisation de Google?

Vous pouvez changer la façon dont le nombre est formaté en utilisant le google.visualization.NumberFormat classe.

var formatter = new google.visualization.NumberFormat({
    fractionDigits: 0,
    prefix: '$'
});

formatter.format(data, 1); // Apply formatter to second column.

Si vous avez besoin de plus de flexibilité, avoir un regard sur l' PatternFormat classe.

Voici le référence API.

Créer un nouveau type de données pour ce que vous voulez dans la pointe de l'outil:

var data = new google.visualization.DataTable();
data.addColumn('string', 'Game');
data.addColumn('number', 'Transactions');
data.addColumn({type:'string', role:'tooltip'}); // here is the tooltip line

Maintenant, ajoutez les informations que vous voulez dans votre tooltip à vos données:

['$FormatedWeekday', $SalesAll,'$ToolTip']
['$FormatedWeekday', $SalesAll,'$ToolTip']
['$FormatedWeekday', $SalesAll,'$ToolTip']

Vous perdrez toutes les données par défaut dans votre péage de pointe de sorte que vous pouvez vous ré-emballage:

$ToolTip = ''.$FormatedWeekday.' \u000D\u000A '.$SalesAll.' \u000D\u000A '."Red Cross  Event";

le" \u000D\u000A " force une rupture de ligne

j'essayais de faire la même chose avec un diagramme à secteurs de Google. Avec le code original, sur mouseover, le tooltip montrait l'étiquette, le nombre brut, et le pourcentage.

le code d'origine était:

données.setValue(0, 0, 'les arbres de Noël');

données.setValue(0, 1, 410000000);

et le tooltip indiquerait " arbres de Noël 410000000 4,4%."

pour formater le texte, j'ai ajouté une ligne au code, donc est:

données.setValue(0, 0, 'les arbres de Noël');

données.setValue(0, 1, 410000000);

données.setFormattedValue(0, 1, "410 millions de dollars");

Le résultat a été une info-bulle qui a lu, "les arbres de Noël de 410 millions de 4,4%"

j'espère que cela aide!

Google Chart ne supporte pas le format HTML tooltip LineChart, BarChart. J'utilise:

google.visualization.events.addListener(chart, 'onmouseover', function(rowColumn){
                                myFunction();
                            });

myFunction(): vous pouvez utiliser popup pour afficher plus d'informations.

il y a une façon très facile de le faire, vous avez juste à utiliser l'un des Formatters pour les données:

// Set chart options
var options = {
hAxis: {format: 'MMM dd, y'}
};

// Format the data
var formatter = new google.visualization.DateFormat({pattern:'EEEE, MMMM d, y'});
formatter.format(data,0);

// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.AreaChart(document.getElementById('visualization'));
chart.draw(data, options);

vous formatez simplement l'axe différemment du format de données, puisque le format de données ne se présentera que lorsque vous mouseOver.

une autre façon de le faire est d'ajouter une autre colonne à vos données qui fera office de tooltip.

function drawVisualization() {
    data = new google.visualization.DataTable()
    data.addColumn('string', 'Date');
    data.addColumn('number');
    data.addColumn({type:'string',role:'tooltip'});
    data.addRow();
    base = 10;
    data.setValue(0, 0, 'Datapoint1');
    data.setValue(0, 1, base++);
    data.setValue(0, 2, " This is my tooltip1 ");

    data.addRow();
    data.setValue(1, 0, 'Datapoint2');
    data.setValue(1, 1, base++);
    data.setValue(1, 2, "This is my second tooltip2");

    // Draw the chart.
    var chart = new google.visualization.BarChart(document.getElementById('visualization'));
    chart.draw(data, {legend:'none', width:600, height:400});
}

POUR INFORMATION, tous:

Google a ajouté des infobulles HTML/CSS personnalisées en septembre 2012: https://google-developers.appspot.com/chart/interactive/docs/customizing_tooltip_content

on dirait que vous êtes maintenant capable de personnaliser le texte tooltip en ajoutant une colonne spéciale qui a role: 'tooltip': https://developers.google.com/chart/interactive/docs/customizing_tooltip_content

je cherchais aussi la même option. Semble comme il n'y a pas de manière directe. Mais nous pouvons désactiver le tooltip par défaut et faire apparaître notre propre version en utilisant SelectHandler. Faites-nous savoir si vous avez trouvé une plus mieux/plus directe. Merci

le seul moyen que j'ai trouvé pour le désactiver était de traverser le DOM dans le gestionnaire de vol stationnaire (pour les diagrammes circulaires de toute façon):

$(pie.Ac.firstElementChild.contentDocument.childNodes[0].childNodes[2].childNodes[1].firstChild.childNodes[2]).remove();

qui est hideux et soumis à Google de maintenir la structure qui existe... est-il un meilleur moyen?

jetez un coup d'oeil aux rôles datables et à l'exemple tooltip: https://developers.google.com/chart/interactive/docs/roles

label: 'Year',   'Sales',         null,   'Expenses',         null
`role: domain,     data,       tooltip,         data,      tooltip`
     '2004',       1000,    '1M$ sales,          400,    '.4M expenses
                       in 2004'                     in 2004'
     '2005',       1170, '1.17M$ sales,          460,    '.46M expenses
                        in 2005'                    in 2005'
     '2006',        660,  '.66M$ sales,         1120,    '.12M expenses
                        in 2006'                    in 2006'
     '2007',       1030, '1.03M$ sales,          540,    '.54M expenses
                        in 2007'                    in 2007'

null les étiquettes sont utilisées comme outil pour les "ventes" et les "dépenses" respectivement.