Форматирование Google Charts TreeMap Node

Question

У меня есть хорошая карта дерева, созданная для моих данных, и она все работает, и мне удалось добавить значения к имени, но это могло бы быть намного лучше.

Древовидные карты, доступные в Google Analytics, имеют узлы с различным форматированием, включая значения и дочерние значения. Есть ли способ отформатировать html-блок, который отображается для каждого узла, как это, с помощью диаграмм, которые у нас есть?

Answer 1

мало что можно сделать со стандартными опциями конфигурации,
кроме изменения стиля текста надписи

однако вы можете вручную изменить существующие или добавить свои собственные элементы на график,
как только событие 'ready' сработает ...

но если вы хотите переместить / изменить исходную метку,
он вернется к исходному стилю / местоположению при наведении курсора или другой активности
необходимо использовать MutationObserver для переопределения

см. Следующий рабочий фрагмент для примера добавления дополнительных меток ...

добавлено количество дочерних элементов для каждого местоположения вместе со статической меткой -> 'Children'
и метки перемещаются в верхний левый угол, как показано на рисунке

google.charts.load('current', {
  packages: ['treemap']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Location', 'Parent', 'Market trade volume (size)', 'Market increase/decrease (color)'],
    ['Global', null, 0, 0],
    ['America', 'Global', 0, 0],
    ['Europe', 'Global', 30, 0],
    ['Asia', 'Global', 10, 0],
    ['Australia', 'Global', 40, 0],
    ['Africa', 'Global', 30, 0],
    [{ v: 'USA', f: 'United States of America' }, 'America', 20, 0],
    ['Mexico', 'America', 24, 12],
    ['Canada', 'America', 16, -23],
    ['Ontario', 'Canada', 12, -9],
    ['Alberta', 'Canada', 24, 13],
    ['UK', 'Europe', 21, -5],
    [{ v: '123', f: 'London' }, 'UK', 21, -5],
    [{ v: '456', f: 'London' }, 'Ontario', 21, -5],
    ['Ohio', 'USA', 12, 3],
    ['Rhode Island', 'USA', 24, 4]
  ]);

  var container = document.getElementById('chart_div');
  var tree = new google.visualization.TreeMap(container);
  var newLabelCoords = {x: 8, y: 16};

  google.visualization.events.addListener(tree, 'ready', addChildLabels);
  google.visualization.events.addListener(tree, 'select', addChildLabels);

  var observer = new MutationObserver(moveOriginalLabels);
  observer.observe(container, {
    childList: true,
    subtree: true
  });

  // find / move original labels
  function moveOriginalLabels() {
    Array.prototype.forEach.call(container.getElementsByTagName('text'), function(text) {
      var bounds = text.getBBox();
      var rect = text.parentNode.getElementsByTagName('rect')[0];
      if ((rect.getAttribute('fill') !== '#cccccc') && (text.getAttribute('text-anchor') === 'middle')) {
        text.setAttribute('fill', '#424242');
        text.setAttribute('font-weight', 'bold');
        text.setAttribute('x', parseFloat(rect.getAttribute('x')) + newLabelCoords.x + (bounds.width / 2));
        text.setAttribute('y', parseFloat(rect.getAttribute('y')) + newLabelCoords.y);
      }
    });
  }

  function addChildLabels() {
    // hold new labels
    var childCount = [];
    var childLabels = [];

    // svg namespace
    var svgNS = container.getElementsByTagName('svg')[0].namespaceURI;

    // find existing / build new labels
    Array.prototype.forEach.call(container.getElementsByTagName('text'), function(text) {
      if (text.getAttribute('text-anchor') === 'middle') {
        var rect = text.parentNode.getElementsByTagName('rect')[0];

        // exclude top node
        if (rect.getAttribute('fill') !== '#cccccc') {
          moveOriginalLabels();

          // find node value
          var nodeValue;
          for (var i = 0; i < data.getNumberOfRows(); i++) {
            if ((data.getValue(i, 0) === text.textContent) ||
                (data.getFormattedValue(i, 0) === text.textContent)) {
              nodeValue = data.getValue(i, 0);
            }
          }

          // find # of children
          var children = data.getFilteredRows([{
            column: 1,
            value: nodeValue
          }]);

          // add child count
          var textCount = document.createElementNS(svgNS, 'text');
          textCount.setAttribute('fill', '#000000');
          textCount.setAttribute('font-family', 'Arial');
          textCount.setAttribute('font-size', '24');
          textCount.setAttribute('font-weight', 'bold');
          textCount.setAttribute('x', parseFloat(rect.getAttribute('x')) + newLabelCoords.x);
          textCount.setAttribute('y', parseFloat(text.getAttribute('y')) + parseFloat(textCount.getAttribute('font-size')));
          textCount.textContent = children.length;
          childCount.push([text, textCount]);

          // add 'Children' label
          var textLabel = document.createElementNS(svgNS, 'text');
          textLabel.setAttribute('fill', '#000000');
          textLabel.setAttribute('font-family', 'Arial');
          textLabel.setAttribute('font-size', text.getAttribute('font-size'));
          textLabel.setAttribute('font-weight', 'bold');
          textLabel.setAttribute('x', parseFloat(rect.getAttribute('x')) + newLabelCoords.x);
          textLabel.setAttribute('y', parseFloat(textCount.getAttribute('y')) + parseFloat(textLabel.getAttribute('font-size')) + 2);
          textLabel.textContent = 'Children';
          childLabels.push([text, textLabel]);
        }
      }
    });

    // append new labels
    childCount.forEach(function (text) {
      text[0].parentNode.appendChild(text[1]);
    });
    childLabels.forEach(function (text) {
      text[0].parentNode.appendChild(text[1]);
    });
  }

  drawTree();
  window.addEventListener('resize', drawTree);
  function drawTree() {
    tree.draw(data, {
      minColor: '#f00',
      midColor: '#ddd',
      maxColor: '#0d0',
      headerHeight: 15,
      fontColor: 'black'
    });
  }
});

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