谷歌图表传奇操纵
使用谷歌区域图表： 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)");