谷歌(图表）可视化:在图例中显示值

Google (chart) Visualization: showing value in legend

本文关键字：显示 图表 可视化 谷歌      更新时间：2023-09-26

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

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

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

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

我敢肯定这是显而易见的，但数据是动态引入的。

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

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

对于 pieSliceText 和 labeledValueText，我已经成功地使用了以下选项：

 value
 both
 none
 percent

但是，我不确定百分比，因为如果我使用任何垃圾词，我会得到相同的结果。至于pieSliceText，它似乎不接受两者的值。此外，在标记的值文本上无法识别任何内容。

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

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

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

将"MW"附加到数字的末尾很容易：只需使用数字格式化程序：

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

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

var legendValue = 100;
var legendText1= 'legend1' + legendValue;
data.addRows([[legendText1,legendValue],[],[]])

使用以下设置

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 + '%)');
}
相关文章：