Add custom text to Google Visualization tooltip (u

问题:

The following question almost entirely describes what I'm trying to to...

Add custom text to Google Visualization tooltip

... basically to add extra information to google-viz tooltips. The accepted answer looked pretty good but I'm using the GWT API. From the look of the latest version (1.1) data table doesn't support this...

http://gwt-google-apis.googlecode.com/svn/javadoc/visualization/1.1/com/google/gwt/visualization/client/DataTable.html

...

is anyone aware of any fix or workaround for this?

Thanks.

回答1:

Well the new features in the google charting tools haven't made their way into the the GWT visualization API and wrapper respectively.
I am actually not sure if the GWT API's will be updated at all. However you can always implement these features yourself.

Depending on how you create your DataTable (Programmatically or by the backend) you can:

• Programmatically: you could extend the DataTable or AbstractDataTable class and implement the missing features and functions via JSNI (i.e. addColumn(type, role), etc. Checkout the source code for AbstractDataTable).
• JSON from the backend: you could just create the appropriate DataTable JSON structure on the backend and then just call DataTable.create() and pass it to the draw() method without any code modifications. (I haven't tested it but it should work as DataTable is just a JavaScriptObject)

BTW: the latest version of the GWT Visualization API is actually (1.1.2)

回答2:

Based on Ümit's answer I was able to do this very easily using JSNI, I thought I'd post some sample code for anyone else who comes across this.

To keep things ultra-simple instead of extending the DataTable class I added the following into my client side class which generates the chart:

private native void addTooltipColumn(DataTable data) /*-{
    data.addColumn({type:'string', role:'tooltip'});
}-*/;

Note this is JNSI, hence the commenting / brackets which seem odd to the un-initiated.

I can then call that on the data table:

    addTooltipColumn(dataTable);

And the tooltips can be added along with the data for each row like this:

    data.setValue(row, col, data);
    data.setValue(row, col, "Tool Tip Text");

回答3:

You can also add more information to the tooltip using

double value = 50.0;
data.setCell(row, col, value, Double.toString(value) + "\nExtra information\n On several rows",null);

instead of data.setValue(...).