Google Charts Treemap在iOS设备上无法向上导航的问题咨询

Google Charts开发的Treemap在桌面端运行正常：单击实现向下导航，右键单击实现向上导航。但iOS设备上仅能向下导航，无法向上返回。当前配置中rollup绑定contextmenu事件，drilldown绑定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>

问题根源是iOS Safari对contextmenu事件的支持限制：iOS默认不会触发右键（contextmenu）事件，用户需手动开启特定设置才会生效，这直接导致rollup（向上导航）功能无法触发。

解决思路是给rollup绑定移动端通用的事件类型，推荐添加dblclick（双击），无需额外设置即可在iOS上生效，同时保留桌面端的contextmenu事件：

1. 修改eventsConfig中的rollup配置，增加dblclick事件：

eventsConfig: {
  rollup: ['contextmenu', 'dblclick'],
  drilldown: ['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', 'dblclick'],
          drilldown: ['click'],
        }
      };

      tree.draw(data, optionsV50);
    }
  </script>
</head>
<body>
  <div id="chart_div" style="width: 900px; height: 600px;"></div>
</body>
</html>

如果需要更贴合移动端操作习惯，也可以自定义长按事件逻辑，但dblclick是最简单的跨端兼容方案。

内容的提问来源于stack exchange，提问作者suitedupgeek