javascript 谷歌（图表）可视化：在图例中显示价值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19977277/
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 (chart) Visualization: showing value in legend
提问by lotech
I've added a Google Visualization pie chart to my page. It's all working great and I didn't have a problem customising it with the predefined options. However, there isn't an option to display the values within the legend instead of percentages, only within the slices themselves or on the hover tooltip.
我在我的页面中添加了一个 Google Visualization 饼图。一切都很好，我用预定义的选项自定义它没有问题。但是，没有选项可以在图例中显示值而不是百分比，只能在切片本身或悬停工具提示上显示。
I'd like to show the values in the legend and the percentages in the slices (the latter I can do through options).
我想显示图例中的值和切片中的百分比（后者我可以通过选项来完成）。
For a bonus point... can I append "MW" on the end of the values i.e. 145WM is outputted rather than just 145.
对于加分点......我可以在值的末尾附加“MW”，即输出 145WM 而不是 145。
My current chart's code: http://pastebin.com/4JJdpxKx
我当前的图表代码：http: //pastebin.com/4JJdpxKx
I'm sure it's obvious but the data is being brought in dynamically.
我确信这很明显，但数据是动态引入的。
采纳答案by asgallant
The only way to add the value to the legend is to change the values or formatted values of the label column's data, which will also change the labels in the tooltips.
将值添加到图例的唯一方法是更改标签列数据的值或格式化值，这也会更改工具提示中的标签。
Appending "MW" to the end of your numbers is easy: just use a NumberFormatter:
在数字末尾附加“MW”很容易：只需使用NumberFormatter：
// format column 1 as "1,234 MW"
var formatter = new google.visualization.NumberFormat({pattern: '#,### MW'});
formatter.format(data, 1);
回答by cpu
It's hard to find proper documentation for Google Charts, and my biggest fear is that because it isn't documented it could be taken away any time, but this should do what you want:
很难为 Google Charts 找到合适的文档，我最大的恐惧是因为它没有记录，所以它可以随时被拿走，但这应该做你想做的：
chart1.options = {
.
.
.
pieSliceText: 'value',
legend: {
position: 'labeled',
labeledValueText: 'both',
textStyle: {
color: 'blue',
fontSize: 14
}
}
};
for both the pieSliceTextand labeledValueTextI have successfully used the options:
对于pieSliceText和labelsValueText我已经成功地使用了这些选项：
value
both
none
percent
However, I'm not sure about percentbecause I get the same result if I use any junk word. As for pieSliceTextit seems it does not accept the value both. Also, noneis not recognized on the labeledValueText.
但是，我不确定百分比，因为如果我使用任何垃圾词，我会得到相同的结果。至于pieSliceText它似乎不接受值both。此外，没有在labeledValueText上不被识别。
So, to be sure you'll have to try the different combinations. I personally would have like to have bothon the pieSliceText, but getting it on the labeled legend is good enough for me.
因此，为了确保您必须尝试不同的组合。我个人希望在pieSliceText 上同时拥有两者，但将其放在标记的图例上对我来说已经足够了。
It's unfortunate that Google Charts lack consistency in their options, but that might be because they won't want to continue supporting them. It's even more unfortunate that if documentation for these exist, it is nearly impossible to find.
不幸的是，Google Charts 的选项缺乏一致性，但这可能是因为他们不想继续支持它们。更不幸的是，如果存在这些文档，则几乎不可能找到。
回答by arn-arn
you have to create variables and dynamically fetched the data.
您必须创建变量并动态获取数据。
var legendValue = 100;
var legendText1= 'legend1' + legendValue;
data.addRows([[legendText1,legendValue],[],[]])
回答by Kishore Chivukula
Use below setting
使用以下设置
legend: { position: 'labeled', labeledValueText: 'none'}
And code below to customize legend text
和下面的代码来自定义图例文本
var total = 0;
for (var i = 0; i < dataPie.getNumberOfRows(); i++) {
total = total + dataPie.getValue(i, 1);
}
for (var i = 0; i < dataPie.getNumberOfRows(); i++) {
var label = dataPie.getValue(i, 0);
var val = dataPie.getValue(i, 1);
var percentual = Math.round(((val / total) * 100));
dataPie.setFormattedValue(i, 0, label + ' - ' + ' (' + percentual + '%)');
}
