Google 图表数字格式

Question

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

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

Answer 1

你需要改变：

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

而不是：

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

编辑： 看看这个实例

Answer 2

NumberFormat 只是用于简单的格式化。如果您想要的不仅仅是格式，比如您想在上面添加其他文本、图像，甚至另一个图表，您应该查看这个惊人的提示！ Google 工具提示。 这里

Answer 3

如果您使用多币种，请添加参数语言 经验：

if( currency == 'USD' )
    var local_currency = 'en'; // output on chart 1,256$
    var currency = '$';
{elseif currency == 'VND'}
    var local_currency = 'vi'; // output on chart 1.256đ
    var currency = 'đ';
{/if}

google.charts.load('current', {'packages': ['corechart', 'line'], 'language': local_currency});
google.charts.setOnLoadCallback(todayLineChartTotal);

function todayLineChartTotal(){
    var chartDivTotal = document.getElementById('line_top_x_total'), data = new google.visualization.DataTable();
    data.addColumn('date', 'date');
    data.addColumn('number', analytics_total_view );
    data.addRows([ [new Date(2023, 8, 15, 10, 45), 1256] ]);
    var chartwidth = $('#line_top_x_total').width();

    var lineChartOptions = {
        title: '',
        chartArea: {width:'86%', left:57, top:12, height:'75%'},
        legend: {position:'none'},
        dateFormat: 'YYYY/MM/DD',
        curveType: 'function',
        pointSize: 5,
        hAxis: {showTextEvery: 2, format: 'd/M/yyyy',},
        vAxis: { minValue: 0, viewWindow: { min: 0 }, format: "#,###"+currency,}
    }

    new google.visualization.LineChart(chartDivTotal).
    draw(data, lineChartOptions);
}