在 google-chart 树图中显示值

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(0)
2) 您不想修改数据中的值 table 或它的加载方式

使用对象表示法，我们可以提供值 (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 显示为 'United States of America'，但 link 下方的状态备份到 '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-chart 树图中显示值

showing the values in google-chart treemap

javascript

charts

google-visualization

treemap