时间戳

首页 > 解决方案 > 显示谷歌图表树形图中的值

javascript - 显示谷歌图表树形图中的值

问题描述

我使用谷歌图表创建了一个树形图。
这是代码：

<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>

它将树图显示为： 在此处输入图像描述

现在，我想在树形图上显示市场交易量（大小）的值（无需任何鼠标操作）。因为它只有一层所以可以直接显示值而无需任何计算。我在文档中搜索但找不到类似的东西。

标签： javascriptchartsgoogle-visualizationtreemap

解决方案

这里做了几个假设......

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

使用对象表示法，我们可以提供值 ( v:) 和格式化值 ( f:)

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

这使我们可以在不影响关系的情况下更改显示，
以防您有超过一层的数据...

因此，aDataView用于修改值
使用该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>

推荐阅读