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

Question

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

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

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

我使用vAxis.format = "format:'#%' "乘以100.因此.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

我希望这有助于一些随机的陌生人寻找它。 ;）