16

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

var formatter = new google.visualization.NumberFormat({
      分数位数：2，
      后缀： '％'
    });
formatter.format（数据，1）；// 将格式化程序应用于第一列。

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

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

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

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

4

4 回答 4

22

我通过完全按照您的方式指定格式化程序来完成这项工作：

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\'%\'' }
于 2013-07-06T16:52:29.730 回答
7 
var formatter = new google.visualization.NumberFormat({ 
  pattern: '#%', 
  fractionDigits: 2
});

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

于 2011-12-09T17:53:03.713 回答
3

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

我以前这样做的行如下所示：options['vAxis'] = {'format': "#,###'%'"};

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

于 2011-08-30T19:21:56.547 回答
2

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

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

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

于 2018-02-19T21:09:02.477 回答