Question

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

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

对于奖励点...我可以在值的末尾添加“MW”，即输出145WM而不是仅仅145.

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

Answer 1

很难找到适当的Google图表文档，我最担心的是因为它没有记录，所以可以随时带走，但这应该做你想要的：

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

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

 value
 both
 none
 percent

但是，我不确定 百分比 ，因为如果我使用任何垃圾字，我会得到相同的结果。至于 pieSliceText ，它似乎不接受两者的值。此外， labeledValueText 无法识别 none 。

所以，确保你必须尝试不同的组合。我个人希望在 pieSliceText 上有两个，但是在标记的图例中获取它对我来说已经足够了。

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

Answer 2

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

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

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

Answer 3

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

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

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

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

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

4 个答案: