简体   繁体   中英

Google Charts formatting not working

I have the following line chart code. I want to display a $ sign next to the column Earnings in AUD ; however everything I have tried on the internet is not working. There are no errors in my console, either.

How can I get this to work? Here's my javaScript:

    google.load('visualization', '1.1', {packages: ['line']});
    google.setOnLoadCallback(drawChart);

    function drawChart()
    {
      var data = new google.visualization.DataTable();
      data.addColumn('number', 'Day');
      data.addColumn('number', 'Pageviews');
      data.addColumn('number', 'Number of Sales');
      data.addColumn('number', 'Earnings in AUD');

      data.addRows([
        [1,  37.8, 80.8, 41.8],
        [2,  30.9, 69.5, 32.4],
        [3,  25.4,   57, 25.7],
        [4,  11.7, 18.8, 10.5],
        [5,  11.9, 17.6, 10.4],
        [6,   8.8, 13.6,  7.7],
        [7,   7.6, 12.3,  9.6],
        [8,  12.3, 29.2, 10.6],
        [9,  16.9, 42.9, 14.8],
        [10, 12.8, 30.9, 11.6],
        [11,  5.3,  7.9,  4.7],
        [12,  6.6,  8.4,  5.2],
        [13,  4.8,  6.3,  3.6],
        [14,  4.2,  6.2,  3.4]
      ]);

      var options = {
        chart: {

        },
        width: 900,
        height: 500
      };

      var chart = new google.charts.Line(document.getElementById('linechart_material'));

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

      chart.draw(data, options);
    }

Here's what the chart looks like. As you can see, the $ sign isn't showing next to the data:

屏幕截图

Please check this one, that might be helpful for you.
google.setOnLoadCallback(drawChart);
function drawChart()
{
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'Day');
  data.addColumn('number', 'Pageviews');
  data.addColumn('number', 'Number of Sales');
  data.addColumn('number', 'Earnings in AUD');
  data.addColumn({type: 'string', role: 'tooltip'});

  data.addRows([
    [1,  37.8, 80.8, 41.8 , '1 Earnings in AUD 41.8 $'],
    [2,  30.9, 69.5, 32.4, '2 Earnings in AUD 32.4 $'],
    [3,  25.4,   57, 25.7, '3 Earnings in AUD 25.7 $'],
    [4,  11.7, 18.8, 10.5, '4 Earnings in AUD 10.5 $'],
    [5,  11.9, 17.6, 10.4, '5 Earnings in AUD 10.4 $'],
    [6,   8.8, 13.6,  7.7,'6 Earnings in AUD 7.7 $'],
    [7,   7.6, 12.3,  9.6,'7 Earnings in AUD 9.6 $'],
    [8,  12.3, 29.2, 10.6,'8 Earnings in AUD 10.6 $'],
    [9,  16.9, 42.9, 14.8,'9 Earnings in AUD 14.8 $'],
    [10, 12.8, 30.9, 11.6,'10 Earnings in AUD 11.6 $'],
    [11,  5.3,  7.9,  4.7,'11 Earnings in AUD 4.7 $'],
    [12,  6.6,  8.4,  5.2,'12 Earnings in AUD 5.2 $'],
    [13,  4.8,  6.3,  3.6,'13 Earnings in AUD 3.6 $'],
    [14,  4.2,  6.2,  3.4,'14 Earnings in AUD 3.4 $']
  ]);

    var formatter = new google.visualization.NumberFormat({
    fractionDigits: 2,
     prefix: '£'
   });
  var options = {
    chart: {

    },
    width: 900,
    height: 500
  };

 // var chart = new google.charts.Line(document.getElementById('linechart_material'));
   var chart  = new google.visualization.LineChart(document.getElementById('linechart_material'));     
  //var formatter = new google.visualization.NumberFormat({prefix: '$', negativeColor: 'red', negativeParens: true});
  // formatter.format(data, 3);

  chart.draw(data, options);
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM