Google Chart Number formatting

问题

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);}

回答1:

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

回答2:

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

来源：https://stackoverflow.com/questions/13650191/google-chart-number-formatting