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

Question

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

var formatter = new google.visualization.NumberFormat({
小数位数:2，
后缀: '％'
});
formatter.format(data, 1);//将格式化程序应用于第一列。

NumberFormat 有没有办法将每个元素乘以 100？否则工具提示显示为 0.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\'%\'' }