Question

我使用Google图表API来显示折线图，但我需要将数字显示为货币。在图表本身上，我能够将数字显示为货币，但当鼠标悬停在一个点上并显示对话框时，该数字不会按指定显示。

        <script type="text/javascript">
            google.load("visualization", "1", {packages:["corechart"]});
            google.setOnLoadCallback(drawChart);

            function drawChart() {

                var data = google.visualization.arrayToDataTable(<?php echo $data; ?>);


                var options = {
                    chartArea:{left:40,top:10},
                    pointSize: 6,
                    vAxis: {format:'$###,###,###.00'}, // Money format
                    legend: {position:'none'}



                };

                var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
                chart.draw(data, options);

            }
        </script>

从这张图片中可以看出，左侧显示的垂直列确实使用了上面代码中使用vAxis.format指定的小数点，但对话框中没有显示小数或美元符号（I屏幕截图后添加了美元符号。

http://i48.tinypic.com/121uznm.jpg

如何在对话框中显示与左对齐垂直列中的数字相同的数字？

我尝试更新我用来将数据填充到货币格式的PHP数组，但之后谷歌图表不会呈现，因为它不是简单的数字。

Answer 1

这是巴西货币的完美格式：

  var formatter = new google.visualization.NumberFormat({decimalSymbol: ',',groupingSymbol: '.', negativeColor: 'red', negativeParens: true, prefix: 'R$ '});
  formatter.format(data, 1);

也可以使用精美的美元，只需将R$更改为$

10500.5保留10.500,50，更多前缀

10500保留10.500,00，更多前缀

Answer 2

现在有一种格式用于指定单元格的原始值和格式化值[1]：将值加载到图表中时，而不是例如addRow(['2012-08-31, 4]);它会addRow(['2012-08-31', {v: 4, f: '$4.00'}]);更多的语法示例会通过文档传播，但我找不到链接到它的好地方。改变生成示例中的$ data对象以包含该格式的方法应该不会太难，但也有其他格式化选项。

如果您出于某种原因而宁愿在JS中定义该格式，则可以使用NumberFormatter。

[1]我第一次开始使用图表工具时，我认为他们没有这种语法。不知道什么时候被添加，或者直到最近我才注意到它。

Answer 3

试试这个：

var formatter = new google.visualization.NumberFormat({pattern:'###,###'} ); formatter.format(data, 1);

对我来说很棒。发现于： Comma Separated Data in Google Visualisation API

Answer 4

我发现另一个非常有用的选项，在概念上与arrayToDataTable（）方法类似，是JavaScript文字初始化语法，如下所示：

var data = new google.visualization.DataTable(
                {
                    cols: [
                        {id: 'date', label: 'Date', type: 'string'},
                        {id: 'parnter1', label: 'Partner A', type: 'number'},
                        {id: 'partner2', label: 'Partner B', type: 'number'}
                    ],
                    rows: [
                        { c: [{ v: '06/2012' }, { v: 12345, f: '$12,345' }, { v: 98765, f: '$98,765'}] },
                        { c: [{ v: '07/2012' }, { v: 10123, f: '$10,123' }, { v: 123123, f: '$123,123'}] }
                    ]
                }
            );

https://google-developers.appspot.com/chart/interactive/docs/datatables_dataviews

在Google图表API中显示货币

4 个答案: