3

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

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

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

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

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

4

4 回答 4

20

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

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

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

 value
 both
 none
 percent

但是，我不确定百分比，因为如果我使用任何垃圾词，我会得到相同的结果。至于pieSliceText似乎它不接受这两个值。此外，在labeledValueText上没有识别出任何内容。

所以，为了确保你必须尝试不同的组合。我个人希望将两者都放在pieSliceText上，但是将它放在带标签的图例上对我来说已经足够了。

不幸的是，谷歌图表在他们的选择上缺乏一致性，但这可能是因为他们不想继续支持他们。更不幸的是，如果存在这些文档，则几乎不可能找到。

于 2014-07-07T19:58:50.670 回答
1

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

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

data.addRows([[legendText1,legendValue],[],[]])
于 2015-03-04T17:59:30.190 回答
1

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

将“MW”附加到您的数字末尾很容易：只需使用NumberFormatter：

// format column 1 as "1,234 MW"
var formatter = new google.visualization.NumberFormat({pattern: '#,### MW'});
formatter.format(data, 1);
于 2013-11-14T16:16:42.467 回答
0

使用以下设置

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 + '%)');
}
于 2019-01-21T04:28:57.653 回答