Google Visualization : how to show some icon at the top of a column

问题

I have a simple bar chart in my app, and I need to place some ".", some icon, or anything else at the top of my bar.

Here is the code:

DataTable data = DataTable.create();
data.addColumn(ColumnType.STRING, "Year");
data.addColumn(ColumnType.NUMBER, "Sales");
data.addRows(2);
data.setValue(0, 0, "Work");
data.setValue(0, 1, 14);
data.setValue(1, 0, "Sleep");
data.setValue(1, 1, 10);

BarChart barChart = new BarChart(data, options);
vpnl.setHeight("500px");
vpnl.add(barChart);

And here is the output, the black circle you can see here is what i want to place at this location, or it can be any number.

Any idea ?

回答1:

This feature is not currently supported. The only way to implement it is to write some fancy javascript to create it.

I am no pro at working with SVG with javascript, and won't pretend to be. I'll let you know what I found out with Firebug, and share that.

Using this chart I inspected the SVG element that's created. It has 5 different <g> (I'm assuming group) elements.

g[1] contains information on the title.
g[2] contains the legend
g[3] contains the chart information (sub-groups with the chart area, gridlines, series, axis label values, etc.) -- when a point is selected, this shows the circle/double-circle for that point too
g[4] contains axis titles
g[5] contains the tooltips in two separate groups, but only on mouseover

Here is the function in the code that gets triggered when you mouseover a point:

Y.Ov=function(a,b,c){a=new kv(a);var d=this.Mf.pk(Wj);b=b[zc](sd);d[w](this.Mf[sb](b[0]));for(var e=1;e<b[L];++e)d[w](this.Mf.pk(ti)),d[w](this.Mf[sb](b[e]));Qt(d,c);a.t()[w](d);a.Zz(100);a.Yz(100);this.on[y](a);return a};Y.appendChild=function(a,b){if(b){var c;if(b[Bc]==Sv){if(!b.Th())return;c=b.t()}else c=b;a.t()[w](c)}};Y.replaceChild=function(a,b,c){a.t().replaceChild(b,c);Cu(c)};Y.Fg=function(a){a.Th()&&this.xs(a.t())};Y.xs=function(a){this.Mf.Fg(a)};Y.ds=function(a){this.Mf.removeNode(a);Cu(a)};

This probably doesn't help you. I can't find any easy way to create a workaround for this (oh-so-needed) feature. Sorry there's no solution yet!

来源：https://stackoverflow.com/questions/15249247/google-visualization-how-to-show-some-icon-at-the-top-of-a-column

标签

gwt

google-visualization