我正在使用 Google 图表，这一切似乎在桌面上运行得很好 - 具体来说，我可以单击树，然后右键单击三个。
然而，在 iOS 上（手边没有 Android），我可以在树上“向下”导航，但似乎无法返回“向上”树。
我错过了一些明显的东西吗？
文档 (https://developers.google.com/chart/interactive/docs/gallery/treemap) 建议使用以下选项：
'click', 'contextmenu', 'dblclick', 'mouseout', 'mouseover'. With 'contextmenu' corresponds to the right-click.<!DOCTYPE html>
<html>
<head>
<title>File System TreeMap</title>
<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 = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Parent');
data.addColumn('number', 'Size');
data.addRows([
['data', null, 1366275107471],
['TEST-FOLDER', 'data', 1366262437854],
['BigFolder', 'TEST-FOLDER', 1091265105286],
['subfolder1', 'TEST-FOLDER', 93057215638],
['import', 'TEST-FOLDER', 68027988721],
['smallFolder2', 'subfolder1', 36929298127],
['smallFolder1', 'subfolder1', 29465188106],
['userarea', 'TEST-FOLDER', 26341000093],
// More rows here
]);
var tree = new google.visualization.TreeMap(document.getElementById('chart_div'));
var optionsV50 = {
headerHeight: 30,
showScale: true,
useWeightedAverageForAggregation: true,
eventsConfig: {
rollup: ['contextmenu'],
drilldown: ['click'],
}
};
tree.draw(data, optionsV50);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 600px;"></div>
</body>
</html>
我已经通过用按钮模拟右键单击来解决这个问题。似乎工作得很好 - 为将来遇到此问题的任何人编写代码：
<!DOCTYPE html>
<html>
<head>
<title>File System TreeMap</title>
<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);
let tree;
let data;
let currentRootIndex = 0; // Track the current root index
function drawChart() {
data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Parent');
data.addColumn('number', 'Size');
data.addRows([
['data', null, 1366275107471],
['TEST-FOLDER', 'data', 1366262437854],
['BigFolder', 'TEST-FOLDER', 1091265105286],
['subfolder1', 'TEST-FOLDER', 93057215638],
['import', 'TEST-FOLDER', 68027988721],
['smallFolder2', 'subfolder1', 36929298127],
['smallFolder1', 'subfolder1', 29465188106],
['userarea', 'TEST-FOLDER', 26341000093],
// More rows here
]);
tree = new google.visualization.TreeMap(document.getElementById('chart_div'));
var options = {
headerHeight: 30,
showScale: true,
useWeightedAverageForAggregation: true,
};
tree.draw(data, options);
// Listen for clicks on the treemap
google.visualization.events.addListener(tree, 'select', function() {
var selection = tree.getSelection();
if (selection.length > 0) {
var selectedItem = selection[0];
currentRootIndex = selectedItem.row;
var value = data.getValue(currentRootIndex, 0);
console.log('Selected node: ' + value);
}
});
}
function simulateRightClick() {
// Get the current parent of the selected node
let parentIndex = data.getFilteredRows([{column: 0, value: data.getValue(currentRootIndex, 1)}])[0];
if (parentIndex !== undefined) {
tree.setSelection([{row: parentIndex}]);
google.visualization.events.trigger(tree, 'select', {});
console.log('Moved up one level');
} else {
console.log('Already at the top level');
}
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 600px;"></div>
<button onclick="simulateRightClick()">Go Up One Level</button>
</body>
</html>```