php 在 Google 图表 API 中显示货币
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/11249439/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Displaying currency in Google chart API
提问by JROB
I am using Google chart API to display a line chart, but I need the numbers to show as currency. On the chart itself, I have been able to get the numbers to display like currency, but when the mouse hovers over a point and the dialog box displays, the number is not displayed as specified.
我正在使用 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>
As you can see from this image, the vertical column displayed on the left does use decimal points as specified using vAxis.formatin the above code, but the dialog box does not show the decimals or the dollar sign (I added the dollar sign after the screen capture).
从这张图片中可以看出,左边显示的垂直列确实使用vAxis.format了上面代码中指定的小数点,但对话框没有显示小数或美元符号(我在屏幕截图后添加了美元符号)。
How can I get the number in the dialog box to display the same as the numbers in the left aligned vertical column?
如何让对话框中的数字与左对齐的垂直列中的数字显示相同?
I tried updating the PHP array I am using to populate the data into currency format there, but then the Google chart does not render since it is not a plain digit.
我尝试更新我用来将数据填充为货币格式的 PHP 数组,但是 Google 图表没有呈现,因为它不是纯数字。
回答by overallduka
This is perfect format to Brazilian currency:
这是巴西货币的完美格式:
var formatter = new google.visualization.NumberFormat({decimalSymbol: ',',groupingSymbol: '.', negativeColor: 'red', negativeParens: true, prefix: 'R$ '});
formatter.format(data, 1);
Works fine whit dollar also, just change R$to $
用美元也可以正常工作,只需更改R$为$
10500.5stay 10.500,50, more prefix
10500.5停留10.500,50, 更多前缀
10500stay 10.500,00, more prefix
10500停留10.500,00, 更多前缀
回答by nthall
There's a format for specifying both the raw value and formatted value for a cell now[1]: when loading the value into the chart, rather than, e.g. addRow(['2012-08-31, 4]);it would be addRow(['2012-08-31', {v: 4, f: '$4.00'}]);More examples of that syntax are sprinkled through the docs but I couldn't find a good place to link to it. It shouldn't be too hard to change the method by which the $data object from your example is generated to include that formatting, but there are other formatting options too.
现在有一种用于指定单元格的原始值和格式化值的格式[1]:当将值加载到图表中时,而不是,例如addRow(['2012-08-31, 4]);它会addRow(['2012-08-31', {v: 4, f: '$4.00'}]);在文档中散布该语法的更多示例,但我不能找到一个链接到它的好地方。更改示例中 $data 对象的生成方法以包含该格式应该不会太难,但也有其他格式选项。
If you'd rather define that formatting in the JS for whatever reason, you can use a NumberFormatter.
如果您出于某种原因更愿意在 JS 中定义该格式,则可以使用NumberFormatter。
[1]I don't think they had this syntax when I first started using the chart tools. No idea when it was added, though, or if I just never noticed it until recently.
[1]当我第一次开始使用图表工具时,我认为他们没有这种语法。不知道它是什么时候添加的,或者我直到最近才注意到它。
回答by user1504583
Try this:
尝试这个:
var formatter = new google.visualization.NumberFormat({pattern:'###,###'} );
formatter.format(data, 1);
var formatter = new google.visualization.NumberFormat({pattern:'###,###'} );
formatter.format(data, 1);
Worked great for me. Found at: Comma Separated Data in Google Visualisation API
对我很有用。位于: Google Visualization API 中的逗号分隔数据
回答by Shane
Another option that I found very useful, and similar in concept to the arrayToDataTable() method is the JavaScript literal initializer syntax as follows:
我发现另一个非常有用且在概念上与 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: ',345' }, { v: 98765, f: ',765'}] },
{ c: [{ v: '07/2012' }, { v: 10123, f: ',123' }, { v: 123123, f: '3,123'}] }
]
}
);
https://google-developers.appspot.com/chart/interactive/docs/datatables_dataviews
https://google-developers.appspot.com/chart/interactive/docs/datatables_dataviews


