English 中文(简体)
How to customize tooltips(text and Format) in Google Vizualization Bar Charts?
原标题:

I am using Google Visualization Bar Chart and I would like to customize or change the tooltip text and format that appears when clicking on a bar.

I have been through documentation but I didn t find a way to implement this. Do you know:

  1. Is it even possible?
  2. If so, could you provide some code examples ?
问题回答

You can change the way the number is formatted by using the google.visualization.NumberFormat class.

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

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

If you need more flexibility, have a look at the PatternFormat class.

Here s the API reference.

Create a new data type for what you want in the tool tip:

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

Now add the info that you want in your tooltip to you data:

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

You will loose all the default data in your toll tip so you might want you re-package it:

$ToolTip =   .$FormatedWeekday.  u000Du000A  .$SalesAll.  u000Du000A  ."Red Cross  Event";

the "u000Du000A" forces a line break

I was trying to do a similar thing with a Google pie chart. With the original code, on mouseover, the tooltip was showing the label, the raw number, and the percentage.

The orignal code was:

data.setValue(0, 0, Christmas trees );

data.setValue(0, 1, 410000000);

And the tooltip would show "Christmas trees 410000000 4.4%."

To format the text, I added a line to the code, so it was:

data.setValue(0, 0, Christmas trees );

data.setValue(0, 1, 410000000);

data.setFormattedValue(0, 1, "$410 million");

The result was a tooltip that read, "Christmas trees $410 million 4.4%"

I hope this helps!

Google Chart not support format html tooltip LineChart, BarChart. I use:

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

in myFunction(): you can use popup to show more information.

There is a very easy way to do it, you just have to use one of the Formatters for the data:

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

You simply format the axis differently from data format, since the data format will only show up when you mouseOver.

Looks like you are now able to customize tooltip text by adding a special column that has role: tooltip : https://developers.google.com/chart/interactive/docs/customizing_tooltip_content

Another way to do it is by adding another column to your data that will act as the 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});
}

FYI, All:

Google added custom HTML/CSS tooltips in September 2012: https://google-developers.appspot.com/chart/interactive/docs/customizing_tooltip_content

I was also looking for the same option. Seems like there isn t any direct way. But we can disable the default tooltip and popup our own version using SelectHandler. Do let us know if you have figured out a more better/direct way. Thanks

The only way I found to disable it was to traverse the DOM in the hover handler (for pie charts anyway):

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

Which is hideous and subject to Google maintaining the structure that exists... is there a better way?

Take a look at DataTable Roles and the tooltip example: 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 

The null labels are used as tooltip for Sales and Expenses respectively.





相关问题
ajax login using httpRequest?

I am trying to develop my login script to give feedback to the user if the login is valid or not. Basically if it isn t correct a div box will show saying its wrong, if its correct it will show its ...

Virtual Tour using sketch up, ajax, flash technologies

I want to know if there are existing technology that make your 3d models in sketch into virtual tours, using either Ajax or Flash for web presentation. If there s none, which will be a good approach ...

How can i update div continuously

I have asp.net application where i have a div which showing the value from other site. The value of that site is changing continuously. I want that my div will automatically update in some interval ...

热门标签