谷歌（图表）可视化：在图例中显示价值答案

【问题标题】：Google (chart) Visualization: showing value in legend谷歌（图表）可视化：在图例中显示价值
【发布时间】：2013-11-14 12:09:36
【问题描述】：

我在我的页面中添加了一个 Google 可视化饼图。一切都很好，使用预定义的选项自定义它没有问题。但是，没有选项可以在图例中显示值而不是百分比，只能在切片本身或悬停工具提示上显示。

我想显示图例中的值和切片中的百分比（后者我可以通过选项来完成）。

为了加分...我可以在值的末尾附加“MW”，即输出 145WM 而不仅仅是 145。

我当前图表的代码：http://pastebin.com/4JJdpxKx

我确定这很明显，但数据是动态引入的。

【问题讨论】：

标签： javascript charts google-visualization

【解决方案1】：

很难为 Google Charts 找到合适的文档，我最大的担心是因为它没有文档记录，它可能随时被拿走，但这应该可以满足您的需求：

chart1.options = {
    .
    .
    .
    pieSliceText: 'value',
    legend: {
        position: 'labeled',
        labeledValueText: 'both',
        textStyle: {
            color: 'blue', 
            fontSize: 14
        }
    }
};

对于 pieSliceText 和 labeledValueText 我都成功使用了这些选项：

 value
 both
 none
 percent

但是，我不确定 percent，因为如果我使用任何垃圾词，我会得到相同的结果。至于 pieSliceText 似乎不接受 both 的值。此外，在 labeledValueText 上无法识别 none。

因此，为了确保您必须尝试不同的组合。我个人希望在 pieSliceText 上拥有 both，但是将它放在带标签的图例上对我来说已经足够了。

很遗憾，Google Charts 的选项缺乏一致性，但这可能是因为他们不想继续支持它们。更不幸的是，如果存在这些文档，几乎是不可能找到的。

【讨论】：

非常感谢您的回答。我真的在 zoogle 的文档中找不到这些图例选项。

【解决方案2】：

向图例添加值的唯一方法是更改标签列数据的值或格式化值，这也会更改工具提示中的标签。

在号码末尾添加“MW”很简单：只需使用NumberFormatter：

// format column 1 as "1,234 MW"
var formatter = new google.visualization.NumberFormat({pattern: '#,### MW'});
formatter.format(data, 1);

【讨论】：

感谢您的回复。附加的 MW 效果很好，非常感谢！现在看来，将值添加到图例中似乎是我无法企及的。在这种情况下，如果有意义的话，我实际上想隐藏值但保留切片的名称（在下图中，隐藏 %ages 但保留国家名称）。似乎也没有这个选项：/ 最后，有一些奇怪的对齐错误...img707.imageshack.us/img707/8076/36wq.png。您可以在幻灯片中看到法国的价值。似乎无法像其他人那样正确对齐。
在将legend.position 选项设置为'labelled' 时无法关闭百分比（我知道这很奇怪）。像您在法国看到的对齐问题通常是由于以下两种情况之一：API 加载不当，或者在隐藏的 div 中绘制图表。从您放在 Pastebin 上的代码来看，这两种情况似乎都不适用于您。您是过去几天内第二个报告此类问题的人。在另一种情况下，对齐问题仅存在于 Chrome 中，并且仅针对某些用户（我自己无法复制）。继续...
我建议在这里提交错误报告：code.google.com/p/google-visualization-api-issues/issues/list。包括为您重现问题的代码（如果该代码存在问题，则可以提供指向您的 Pastebin 的链接）以及您可以提供的有关本地环境的尽可能多的详细信息（操作系统、使用的浏览器 [带有版本号]）。跨度>
嗨阿斯加兰特。再次，非常感谢您的回复。关于对齐错误的一件事很有趣......它出现在实际的 Google 可视化饼图页面上，请参见屏幕截图：img855.imageshack.us/img855/8324/7ger.png。我可以确认这存在于 OSX Mountain Lion 下的 Chrome 中，但不是 Firefox 或 Safari 对我来说（想知道它是如何工作的，肯定它在 Chrome 中测试最多！）。我会向您发布的链接提交错误报告:)
已提交错误报告：code.google.com/p/google-visualization-api-issues/issues/…

【解决方案3】：

您必须创建变量并动态获取数据。

var legendValue = 100;
var legendText1= 'legend1' + legendValue;

data.addRows([[legendText1,legendValue],[],[]])

【讨论】：

【解决方案4】：

使用下面的设置

legend: { position: 'labeled', labeledValueText: 'none'}

以及下面的代码来自定义图例文本

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 + '%)');
}

【讨论】：