Javascript 谷歌图表图例操作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7804129/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google charts legend manipulation
提问by fmsf
Using google area chart: http://code.google.com/apis/chart/interactive/docs/gallery/areachart.html
使用谷歌面积图：http: //code.google.com/apis/chart/interactive/docs/gallery/areachart.html
Does anyone know how I can freelly manipulate the legends?
有谁知道我如何可以自由地操纵传说？
Pretty much I want one of two:
我几乎想要两个之一：
- Be able to freelly set each legend element somewhere.
- Set the legend that is displayed in one line to have multiple lines if the size of the legend exceeds the width of the legend area. (Prefered)
- 能够在某处自由设置每个图例元素。
- 如果图例的大小超过图例区域的宽度，则将一行显示的图例设置为多行。（首选）
I would avoid hacks to manipulate the svg within the iframe btw.
顺便说一句，我会避免黑客操作 iframe 中的 svg。
采纳答案by fmsf
There isn't a way to manipulate the legends as we wish. In the question of the bounty: You can use
没有办法按照我们的意愿操纵传说。在赏金问题中：您可以使用
in two of the charts
在两个图表中
legend : 'none'
and also use colours to guarantee that all elements have the same colour.
并使用颜色来保证所有元素具有相同的颜色。
colors:['red','#004411']
Other than that we can't manipulate them much more unfortunately :(
除此之外，我们无法更不幸地操纵它们:(
回答by MemeDeveloper
For fullcontrol I'd suggest turning them off
为了完全控制，我建议关闭它们
legend : { position:"none"}
Creating your owntotally customised legend outside the chart with html.
使用 html 在图表外创建您自己的完全自定义的图例。
Then binding your custom legend up to the chart using the select event, combined with click or hover / focus events (whatever you want) on your custom legend.
然后使用选择事件将自定义图例绑定到图表，并结合自定义图例上的单击或悬停/焦点事件（无论您想要什么）。
see https://code.google.com/apis/ajax/playground/?type=visualization#interaction_using_eventsfor a start.
请参阅https://code.google.com/apis/ajax/playground/?type=visualization#interaction_using_events开始。
回答by Leandro
Maybe something like this (it's depends on the font that you use, you need fetch the proportion of your font)
也许是这样的（这取决于您使用的字体，您需要获取字体的比例）
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, '<br/>\n');
}
AND THE WRAP WORD FUNCTION (or anything like this)
和包裹词功能（或类似的东西）
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 );
}
SO FOR your code...
所以对于你的代码......
replace values at
替换值在
var chart = new google.visualization.AreaChart(document....
etc
等等
by your vars.
由你的变量。
not use width = 400, use width, and so on... and your string.
不使用width = 400，使用宽度，等等......还有你的字符串。
回答by maleta
I am looking for any smarter solution than mine so I saw this question.
我正在寻找比我更聪明的解决方案，所以我看到了这个问题。
My current solution is to find html element that contains legend and manipulate with them as you would with your own custom html element. (You will have to deal with SVG elems here, though)
我目前的解决方案是找到包含图例的 html 元素，并像使用自己的自定义 html 元素一样操作它们。（不过，您将不得不在这里处理 SVG elems）
document.getElementById('pie-chart').getElementsByTagName('g')[0].setAttribute("style", "transform: translate(-130px)");
回答by Hasib Hosen_Pikkachu
You can just manipulate the following code for the customization of your legends:
您可以操作以下代码来自定义您的图例：
var options = {
title: '',
pieHole: 0.4,
colors: ['#0590FB', '#1DE6A2', '#FEB11C', '#FF4863', '#5A479C'],
legend : { position:"right", alignment:"center"},
chartArea: {
left: 10,
top: 10,
width: '130%',
height: '65%'
},
tooltip: {
trigger:'none'
}
