Google Chart Treemap中的数字格式工具提示

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

使用google.visualization.NumberFormat

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

替换...

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

与...

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

另外，如果使用01格式化，
确保它是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>