10

当您将鼠标悬停在图表上时，我需要格式化我的饼图和柱形图以以货币格式（$###，###）显示 $ 和逗号。现在，它正在显示数字和百分比，但数字为#####.## 这是我的代码。任何帮助，将不胜感激。

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

2 回答 2

19

你需要改变：

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

代替：

  var formatter = new google.visualization.NumberFormat({
        prefix: '$'
    });

编辑：看看这个活生生的例子

于 2012-11-30T21:28:08.403 回答
0

NumberFormat 仅用于简单的格式化。如果你想要的不仅仅是格式化，比如你想在上面放另一个文本、图像，甚至另一个图表，你应该看看这个惊人的技巧！谷歌工具提示。这里

于 2015-08-27T08:45:48.573 回答