14

我正在使用 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了上面代码中指定的小数点，但对话框不显示小数或美元符号（我在屏幕截图后添加了美元符号）。

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

我尝试更新我用来将数据填充为货币格式的 PHP 数组，但是由于它不是普通数字，因此 Google 图表不会呈现。

4

4 回答 4

18

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

  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，更多前缀

于 2015-01-27T12:34:58.350 回答
15

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

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

于 2012-09-11T19:56:33.953 回答
7

试试这个：

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

对我来说效果很好。发现于： Google Visualization API 中的逗号分隔数据

于 2012-11-28T17:56:01.487 回答
3

我发现另一个非常有用且在概念上与 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

于 2012-09-19T21:17:32.073 回答