Числовой формат в Google Chart Treemap Tooltip

Question

Числовой формат в Google Chart Treemap Tooltip

1

Я создаю диаграмму Treemap в Google Charts и после того, как после некоторых из руководств, я не могу получить запятую для отображения в подсказке. Я скопировал 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>';

 }
}

Любая помощь будет принята с благодарностью! Я немного новичок в этом.

Спасибо!

Chris. S 30 авг. 2017, в 17:49

Источник

Теги:

javascript

charts

google-visualization

google-chartwrapper

1 ответ

Ещё вопросы

WhiteHat · Accepted Answer · 2017-08-30T14-26-00.000Z

использовать formatValue метод google.visualization.NumberFormat

метод принимает число и возвращает форматированную строку

заменить...

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

с...

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

также, если вы форматируете data с помощью 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>