Javascript 谷歌图表编号格式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13650191/
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
Google Chart Number formatting
提问by MizAkita
I need to format my pie and column charts to show the $ and comma in currency format ($###,###) when you hover over the charts. Right now, it is displaying the number and percentage but the number as #####.## here is my code. Any help would be appreciated.
当您将鼠标悬停在图表上时，我需要格式化我的饼图和柱状图，以显示货币格式 ($###,###) 中的 $ 和逗号。现在，它显示数字和百分比，但数字为#####。## 这里是我的代码。任何帮助，将不胜感激。
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
var formatter = new google.visualization.NumberFormat({
prefix: '$'
});
formatter.format(data, 1);
var options = {
pieSliceText: 'value'
};
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// REVENUE CHART - Create the data table.
var data4 = new google.visualization.DataTable();
data4.addColumn('string', 'Status');
data4.addColumn('number', 'In Thousands');
data4.addRows([
['Net tution & Fees', 213.818],
['Auxiliaries', 30.577],
['Government grants/contracts', 39.436],
['Private grants/gifts', 39.436],
['Investments', 10.083],
['Clinics', 14.353],
['Other', 5.337]
]);
// EXPENSES CHART - Create the data table.
var data5 = new google.visualization.DataTable();
data5.addColumn('string', 'Status');
data5.addColumn('number', 'Amount');
data5.addRows([
['Instruction', 133.868],
['Sponsored Progams', 34.940],
['Auxiliaries', 30.064],
['Academic Support', 25.529],
['Depreciation & amortization', 18.548],
['Student Services', 22.626],
['Plant operations & maintenance', 18.105],
['Fundraising', 13.258],
['Geneal Administration', 11.628],
['Interest', 6.846],
['Student Aid', 1.886],
]);
// ENDOWMENT CHART - Create the data table.
var data6 = new google.visualization.DataTable();
data6.addColumn('string', 'Status');
data6.addColumn('number', 'In Millions');
data6.addRows([
['2010', 178.7],
['2011', 211.693],
['2012', 199.3]
]);
// Set REVENUE chart options
var options4 = {
is3D: true,
fontName: 'Arial',
colors:['#AFD8F8', '#F6BD0F', '#8BBA00', '#FF8E46', '#008E8E', '#CCCCCC', '#D64646', '#8E468E'],
'title':'',
'width':550,
'height':250};
// Set EXPENSES chart options
var options5 = {
is3D: true,
fontName: 'Arial',
colors:['#AFD8F8', '#F6BD0F', '#8BBA00', '#FF8E46', '#008E8E', '#CCCCCC', '#D64646', '#8E468E'],
'title':'',
'width':550,
'height':250};
// Set ENDOWMENT chart options
var options6 = {
is3D: true,
fontName: 'Arial',
colors:['#AFD8F8', '#F6BD0F', '#8BBA00', '#FF8E46', '#008E8E', '#CCCCCC', '#D64646', '#8E468E'],
'title':'',
'width':450,
'height':250};
// Instantiate and draw our chart, passing in some options.
var chart4 = new google.visualization.PieChart(document.getElementById('chart_div4'));
chart4.draw(data4, options4);
var chart5 = new google.visualization.PieChart(document.getElementById('chart_div5'));
chart5.draw(data5, options5);
var chart6 = new google.visualization.ColumnChart(document.getElementById('chart_div6'));
chart6.draw(data6, options6);}
回答by BrOSs
You need to change:
你需要改变：
var formatter = new google.visualization.NumberFormat(
{negativeColor: 'red', negativeParens: true, pattern: '$###,###'});
formatter.format(data, 1);
instead of:
代替：
var formatter = new google.visualization.NumberFormat({
prefix: '$'
});
EDIT: Check out this live example
编辑：看看这个现场例子
回答by Stefanus Diptya
NumberFormat is just for a simple formating. If you want more than just formatting, like you wanna put another text, an image, or even another chart on it, you should check out this amazing tip! The Google Tooltips. here
NumberFormat 仅用于简单的格式化。如果你想要的不仅仅是格式化，比如你想在上面放另一个文本、一个图像，甚至另一个图表，你应该看看这个惊人的提示！谷歌工具提示。这里
