Google Chart Treemap Tooltip中的数字格式

Question

我在Google Charts中创建了一个Treemap图表，在完成了一些指南之后，我无法在工具提示中显示逗号。我已经复制了下面的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

使用formatValue

的google.visualization.NumberFormat方法

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

替换......

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

与......

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

另外，如果您使用data格式化numberFormat，则 在创建 data后确保

。

请参阅以下工作代码段...

＆＃13;

＆＃13;

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>';

  }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;