Question

我已经使用Google图表创建了树形图。
这是代码：

<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['treemap']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
  var data = google.visualization.arrayToDataTable([
  ['Location', 'Parent', 'Market trade volume (size)', 'Market increase/decrease (color)'],
  ['Global',    null,                 0,                               0],
  ['America',   'Global',             20,                               0],
  ['Europe',    'Global',             30,                               0],
  ['Asia',      'Global',             10,                               0],
  ['Australia', 'Global',             40,                               0],
  ['Africa',    'Global',             30,                               0],
]);
tree = new 
google.visualization.TreeMap(document.getElementById('chart_div'));
google.visualization.events.addListener(tree, 'select', function () {
  tree.setSelection([]);
});
tree.draw(data, {
  headerHeight: 15,
  fontColor: 'black',
  showScale: true,
  maxDepth: 2
});
}
</script>
</head>
<body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>

它将树形图显示为：

现在，我想在树形图上显示市场交易量（大小）的值（无需任何鼠标操作）。由于它只有一层，因此无需任何计算即可直接显示值。我在文档中进行了搜索，但找不到类似的内容。

Answer 1

这里有两个假设...

1）您不想显示Global的值-> Global(0)
2）您不想修改数据表中的值或数据的加载方式

使用对象符号，我们可以提供值（v:）和格式值（f:）

图表将显示格式值，但在确定树顺序时将使用该值

这使我们可以在不影响关系的情况下更改显示，
如果您的数据不只一层以上...

这样，DataView用于修改值
使用setColumns方法为标签提供计算列

var view = new google.visualization.DataView(data);
view.setColumns([{
  calc: function (dt, row) {
    var rowValue;

    if (row === 0) {
      rowValue = dt.getValue(row, 0);  // value for global
    } else {
      // change display value by changing formatted value
      rowValue = {
        v: dt.getValue(row, 0),
        f: dt.getValue(row, 0) + '(' + dt.getFormattedValue(row, 2) + ')'
      };
    }

    return rowValue;
  },
  label: data.getColumnLabel(0),
  type: data.getColumnType(0)
}, 1, 2, 3]);

请参阅以下工作片段...

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',             20,                               0],
    ['Europe',    'Global',             30,                               0],
    ['Asia',      'Global',             10,                               0],
    ['Australia', 'Global',             40,                               0],
    ['Africa',    'Global',             30,                               0],
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([{
    calc: function (dt, row) {
      var rowValue;

      if (row === 0) {
        rowValue = dt.getValue(row, 0);  // value for global
      } else {
        // change display value by changing formatted value
        rowValue = {
          v: dt.getValue(row, 0),
          f: dt.getValue(row, 0) + '(' + dt.getFormattedValue(row, 2) + ')'
        };
      }

      return rowValue;
    },
    label: data.getColumnLabel(0),
    type: data.getColumnType(0)
  }, 1, 2, 3]);

  var tree = new google.visualization.TreeMap(document.getElementById('chart_div'));
  google.visualization.events.addListener(tree, 'select', function () {
    tree.setSelection([]);
  });
  tree.draw(view, {
    headerHeight: 15,
    fontColor: 'black',
    showScale: true,
    maxDepth: 2
  });
});

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

Answer 2

感谢WhiteHat使我步入正轨。使用他的答案，我找到了另一种方法来实现此目标，而该方法与原始示例的偏差较小。

这也允许按ID嵌套。在下面的示例中，您可以将USA显示为“美国”，但是下面的州将链接回到“ USA” ID。

对我来说更重要的是，它使2个项目具有相同的标签。请注意，欧洲>英国和美国>加拿大>安大略省有伦敦。

google.charts.load('current', {'packages':['treemap']});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
      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]
    ]);
    tree = new 
    google.visualization.TreeMap(document.getElementById('chart_div'));
    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>

在Google图表树形图中显示值

2 个答案: