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>