有没有办法在 Google 图表的 TreeMap 中显示子标签
Is there a way to display the children labels in Google Charts' TreeMap
我正在尝试使用 Google 图表创建一个 TreeMap,它不仅显示父标签以及子标签的颜色细分,还显示子标签。我基本上想要这个(保存可能的儿童着色):
我没有找到任何关于它的在线示例或问题,这可能吗?
不确定你能不能得到和图片一模一样的东西,
但是如果你想同时显示 parent 和 child 标签,
使用选项 --> maxDepth: 2
注意:不允许重复 child ID,
这里,object符号用于提供唯一的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>
我正在尝试使用 Google 图表创建一个 TreeMap,它不仅显示父标签以及子标签的颜色细分,还显示子标签。我基本上想要这个(保存可能的儿童着色):
我没有找到任何关于它的在线示例或问题,这可能吗?
不确定你能不能得到和图片一模一样的东西,
但是如果你想同时显示 parent 和 child 标签,
使用选项 --> maxDepth: 2
注意:不允许重复 child ID,
这里,object符号用于提供唯一的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>