Comment personnaliser les info-bulles(le texte et le Format) dans Google Visualisation de Graphiques à barres?

Vous pouvez changer la façon dont le nombre est formaté à l'aide de la 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 le PatternFormat classe.

Voici la Référence de l'API.

J'ai essayé de faire quelque chose de similaire avec Google sur un graphique en secteurs. Avec le code d'origine, à la souris, l'info-bulle a été montrant l'étiquette, le nombre d'analphabètes, et le pourcentage.

L'orignal le code était:

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

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

Et l'info-bulle montrerait "arbres de Noël 410000000 de 4,4%."

Pour formater le texte, j'ai ajouté une ligne dans le code, c'est:

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

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

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

Il y a un moyen très simple 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);

Il vous suffit de format de l'axe différemment de format de données, puisque le format des données ne s'affiche que lorsque vous mouseOver.

Une autre façon de le faire est par l'ajout d'une autre colonne à vos données qui agira en tant que l'info-bulle.

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});
}

J'étais également à la recherche de la même option. Semble comme il n'y a pas de manière directe. Mais on peut le désactiver par défaut info-bulle et popup notre propre version à l'aide de SelectHandler. Faites-nous savoir si vous avez trouvé une plus mieux/plus directe. Grâce

Prendre un coup d'oeil à DataTable Rôles et l'info-bulle exemple: 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,    '$0.4M expenses
                       in 2004'                     in 2004'
     '2005',       1170, '1.17M$ sales,          460,    '$0.46M expenses
                        in 2005'                    in 2005'
     '2006',        660,  '.66M$ sales,         1120,    '$1.12M expenses
                        in 2006'                    in 2006'
     '2007',       1030, '1.03M$ sales,          540,    '$0.54M expenses
                        in 2007'                    in 2007'

La null étiquettes sont utilisées comme info-bulle pour les "Ventes" et "Dépenses", respectivement.