如何设置工具提示以显示与 Google 可视化折线图中的轴匹配的百分比？

Question

可以使用以下代码将工具提示设置为显示百分比：

var formatter = new google.visualization.NumberFormat({
      fractionDigits: 2,
      suffix: '%'
    });
formatter.format(data, 1); // Apply formatter to first column.

NumberFormat 有没有办法将每个元素乘以 100？否则工具提示将显示为 0.50%。

我使用的是 vAxis.format = "format:'#%' " 它确实乘以 100。因此 0.5 在垂直轴上显示为 50%。

根据文档（icu-project.org/apiref），这可以通过将 % 用单引号括起来来覆盖，但这不起作用。

最终结果是工具提示与轴不匹配。最好的方法是什么？

Answer 1

我通过完全按照您的方式指定格式化程序来实现此目的：

var chartData = google.visualization.arrayToDataTable(tableData);
var formatter = new google.visualization.NumberFormat({
    fractionDigits: 2,
    suffix: '%'
});
formatter.format(chartData, 1);

最后一次调用中的 1 表示第二列，其中我有浮点值。

然后，我在图表选项中指定轴的格式，转义百分号，如文档和其他人指出的那样：

var chartOptions = {
    vAxis: { format: '#\'%\'' }
};

然后绘制图表：

var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
chart.draw(chartData, chartOptions);

这将呈现一个左侧轴，其值如 10% 、20% 等等。工具提示看起来与默认提示类似，但百分比如 10.10%、20.20% 等。

如果您还想在左侧轴中显示两个小数位，请在图表选项中使用此格式：

vAxis: { format: '#.00\'%\'' }

Answer 2

var formatter = new google.visualization.NumberFormat({ 
  pattern: '#%', 
  fractionDigits: 2
});

感谢 http://groups.google.com/group/google-visualization-api/

Answer 3

必须用单引号将百分号 (%) 本身引起来。

我用来执行此操作的行如下所示： options['vAxis'] = {'format': "#,###'%'"};

将其与上面的格式化程序结合起来，您可以可以使垂直轴有一个百分比符号，也可以使工具提示也包含它。

Answer 4

好吧...所以这有点晚了。我承认七年前我不需要这个。尽管如此，这对我有用。

var rows = data.getNumberOfRows();

for (var i = 0; i < rows; i++) {
    data.setFormattedValue(i, 4, (data.getFormattedValue(i, 4)*100).toFixed(1) + "%"); //LY
    data.setFormattedValue(i, 3, (data.getFormattedValue(i, 3)*100).toFixed(1) + "%"); //TY
}

就我而言，我使用四列，其中两列以百分比分配给右轴。我希望这些列的工具提示能够反映正确的百分比而不是小数表示形式。

这是 Google 文档的链接：

https://developers.google.com/chart/interactive/docs /reference#DataTable_setFormattedValue

我希望这可以帮助一些随机的陌生人寻找它。 ;)