javascript - Google 图表树形图工具提示中的数字格式

Question

我正在 Google 图表中创建树状图，在遵循一些指南后，我无法在工具提示中显示逗号。我复制了下面的 JS。

本质上，我希望工具提示中显示的数字采用带有逗号的货币格式。但我似乎无法让逗号出现。

google.charts.load('current', {'packages':['treemap']});
google.charts.setOnLoadCallback(drawChart);

var numberFormat = new google.visualization.NumberFormat({
groupingSymbol: ','
   });
  numberFormat.format(data, 1);


  function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'ID');
  data.addColumn('string', 'Budget');
  data.addColumn('number', 'Amount');
  data.addRows([
    ['Program', null, 0],

    ['Housing', 'Program', null],
    ['Home1', 'Housing', 2000000],
    ['Home2', 'Housing', 1500000],


    ['Business', 'Program', 2000000],
    ['Coastal Resiliency', 'Program', 5000000],
            ['Infrastructure/City Services', 'Program', 400000],


  ]);

  var tree = new google.visualization.TreeMap(document.getElementById('chart_div'));

  var options = {
    highlightOnMouseOver: true,
    maxDepth: 1,
    maxPostDepth: 2,
    minColor: '#FDC217',
    midColor: '#29BD75',
    maxColor: '#21809C',
    headerHeight: 35,
    headerColor: "#234E94",
    fontColor: "White",
    showScale: true,
    height: 500,
    useWeightedAverageForAggregation: true,
    generateTooltip: showFullTooltip
  };


    tree.draw(data, options);

function showFullTooltip(row, size) {
return '<div style="background:#FFFFFF; padding:10px; border-style:solid">' +
       '<span style="font-family:Times New Roman"><b>' + data.getValue(row, 0) +
       '</b>, ' + data.getValue(row, 1) +'</span><br>' +
   data.getColumnLabel(1) +
       ': $' + size + '</div>';

 }
}

任何帮助将不胜感激!我对此有点陌生。

谢谢!

Answer 1

使用 google.visualization.NumberFormat 的 formatValue 方法

该方法接受一个数字并返回格式化的字符串

替换...

': $' + size + '</div>'

与...

': ' + numberFormat.formatValue(size) + '</div>';

此外，如果您使用 numberFormat 格式化data，
确保它是在创建数据之后...

请参阅以下工作片段...

google.charts.load('current', {
  callback: drawChart,
  packages: ['treemap']
});

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'ID');
  data.addColumn('string', 'Budget');
  data.addColumn('number', 'Amount');
  data.addRows([
    ['Program', null, 0],
    ['Housing', 'Program', null],
    ['Home1', 'Housing', 2000000],
    ['Home2', 'Housing', 1500000],
    ['Business', 'Program', 2000000],
    ['Coastal Resiliency', 'Program', 5000000],
    ['Infrastructure/City Services', 'Program', 400000]
  ]);

  var numberFormat = new google.visualization.NumberFormat({
    pattern: '#,##0',
    prefix: '$'
  });
  numberFormat.format(data, 2);

  var tree = new google.visualization.TreeMap(document.getElementById('chart_div'));

  var options = {
    highlightOnMouseOver: true,
    maxDepth: 1,
    maxPostDepth: 2,
    minColor: '#FDC217',
    midColor: '#29BD75',
    maxColor: '#21809C',
    headerHeight: 35,
    headerColor: "#234E94",
    fontColor: "White",
    showScale: true,
    height: 500,
    useWeightedAverageForAggregation: true,
    generateTooltip: showFullTooltip
  };


  tree.draw(data, options);

  function showFullTooltip(row, size) {
    return '<div style="background:#FFFFFF; padding:10px; border-style:solid">' +
       '<span style="font-family:Times New Roman"><b>' + data.getValue(row, 0) +
       '</b>, ' + data.getValue(row, 1) +'</span><br>' +
       data.getColumnLabel(1) +
       ': ' + numberFormat.formatValue(size) + '</div>';

  }
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>