谷歌图表传奇操纵

使用谷歌区域图表: http : //code.google.com/apis/chart/interactive/docs/gallery/areachart.html

有谁知道我如何能够自由地操纵传说?

我几乎想要两个中的一个:

  • 能够在某处自由设置每个图例元素。
  • 如果图例的大小超出图例区域的宽度,请将显示在一行中的图例设置为多行。 (首选)

我会避免黑客操纵iframe btw中的svg。

为了完全控制我建议关掉它们

legend : { position:"none"} 

使用html在图表外创建自己完全自定义的图例。

然后使用select事件将自定义图例绑定到图表,并结合自定义图例上的单击或hover/焦点事件(无论您想要什么)。

首先,请参阅https://code.google.com/apis/ajax/playground/?type=visualization#interaction_using_events 。

没有办法像我们希望的那样操纵传说。 在赏金的问题:你可以使用

在两个图表中

 legend : 'none' 

并且还使用颜色来保证所有元素都具有相同的颜色。

 colors:['red','#004411'] 

除此之外我们不能更多地操纵它们:(

也许是这样的(这取决于你使用的字体,你需要获取你的字体的比例)

 var my_legend = "this is my legend x"; var len_legend = my_legend.length; var width_graph = 400; var chars_per_line = width_graph / [REPLACE_BY_PROPORTION] if (len_legend > chars_per_line) { my_legend = wordwrap(my_legend, 20, '
\n'); }

和WRAP WORD FUNCTION(或类似的东西)

 function wordwrap( str, width, brk, cut ) { brk = brk || '\n'; width = width || 75; cut = cut || false; if (!str) { return str; } var regex = '.{1,' +width+ '}(\\s|$)' + (cut ? '|.{' +width+ '}|.+$' : '|\\S+?(\\s|$)'); return str.match( RegExp(regex, 'g') ).join( brk ); } 

所以你的代码……

替换值

 var chart = new google.visualization.AreaChart(document.... 

等等

通过你的vars。

不要使用width = 400 ,使用宽度等等……和你的字符串。

我正在寻找比我更智能的解决方案,所以我看到了这个问题。

我目前的解决方案是找到包含图例的html元素并使用它们与您自己的自定义html元素一起操作。 (但你必须在这里处理SVG元素)

 document.getElementById('pie-chart').getElementsByTagName('g')[0].setAttribute("style", "transform: translate(-130px)");