有没有办法在Google Charts'中显示子标签? TreeMap的

时间:2017-08-09 23:00:29

标签: javascript google-visualization treemap

我尝试使用Google Charts创建一个TreeMap,不仅显示父标签以及孩子的颜色分类,还显示孩子的标签。我基本上想要这个(保存可能的儿童着色):enter image description here

我还没有找到任何在线示例或问题,这可能吗?

1 个答案:

答案 0 :(得分:7)

不确定你是否能完全像照片一样,
但如果要同时显示父标签和子标签, 使用选项 - > maxDepth: 2

注意:不允许重复的儿童ID,
这里,对象表示法用于提供唯一的id,
但仍然在多个节点上显示相同的名称

{v: 'Rick0', f: 'Rick'}
{v: 'Rick1', f: 'Rick'}

其中...
v: =
f: = 格式化值

请参阅以下工作代码段...



google.charts.load('current', {
  packages: ['treemap']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Person', 'Fruit', 'Size', 'Color'],
    ['Global', null, 0, 0],
    ['Bananas', 'Global', 0, 0],
    [{v: 'Rick0', f: 'Rick'}, 'Bananas', 100, 0],
    [{v: 'Anne0', f: 'Anne'}, 'Bananas', 40, 0],
    [{v: 'Peter0', f: 'Peter'}, 'Bananas', 5, 0],
    ['Apples', 'Global', 0, 0],
    [{v: 'Anne1', f: 'Anne'}, 'Apples', 20, 2],
    [{v: 'Peter1', f: 'Peter'}, 'Apples', 20, 2],
    [{v: 'Rick1', f: 'Rick'}, 'Apples', 15, 2],
    ['Oranges', 'Global', 0, 0],
    [{v: 'Rick2', f: 'Rick'}, 'Oranges', 20, 1],
    [{v: 'Peter2', f: 'Peter'}, 'Oranges', 20, 1],
    [{v: 'Anne2', f: 'Anne'}, 'Oranges', 10, 1],
    ['Susanne', 'Global', 10, null]
  ]);

  tree = new google.visualization.TreeMap(document.getElementById('chart_div'));
  tree.draw(data, {
    maxDepth: 2,
    minColor: 'yellow',
    midColor: 'orange',
    maxColor: 'red',
    noColor: 'lime',
  });
});

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