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

B S*_*ven 16 linechart google-visualization number-formatting

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

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),可以通过将%括在单引号中来覆盖,但这不起作用.

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

谢谢.

Mar*_*son 22

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

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

1过去的呼叫装置的第二列,其中我有浮点值.

然后我在图表选项中指定轴的格式,转义文档和其他人指出的百分号:

var chartOptions = {
    vAxis: { format: '#\'%\'' }
};
Run Code Online (Sandbox Code Playgroud)

然后我绘制图表:

var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
chart.draw(chartData, chartOptions);
Run Code Online (Sandbox Code Playgroud)

这会使左侧轴呈现类似的值10%,20%依此类推.工具提示看起来像默认工具提示,但有百分比10.10%,20.20%等等.

如果您还想在左侧轴上使用两个小数位,请将其用作图表选项中的格式:

vAxis: { format: '#.00\'%\'' }
Run Code Online (Sandbox Code Playgroud)

  • 感谢您用单引号包装%的技巧 - 否则轴值乘以100!开车送我疯了 (2认同)

B S*_*ven 7

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

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