格式化 Google 图表 TreeMap 节点

Question

我已经为我的数据创建了一个不错的 Treemap，它一切正常，我已经设法将值附加到名称中，但它可能会好得多。

Google Analytics（分析）中可用的树状图具有非常不同格式的节点，包括值和子值。有没有办法用我们可用的图表来格式化为每个节点呈现的 html 块？

Answer 1

标准配置选项无能为力，
除了改变标签的文字样式

但是，您可以手动更改现有元素或将自己的元素添加到图表中，
一旦'ready' 事件触发......

但如果您想移动/更改原始标签，
它会在悬停或其他活动时恢复到原始样式/位置
必须使用MutationObserver 覆盖

有关添加附加标签的示例，请参见以下工作 sn-p...

添加每个位置的子节点数量以及静态标签 --> '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>