Javascript 在高位图表中以表格格式显示一些数据'；s饼图向下搜索

我的角度项目中有一个highchart的饼图。在该饼图的深入分析中，我希望以表格格式显示一些数据，以代替饼图

所以基本上，一旦用户点击饼图的一部分，饼图应该被表格数据所取代，用户也应该能够返回到饼图，通常就像我们在highcharts中有向下钻取一样

---

有人能帮我转到下一步吗。提前感谢。

您可以使用向下钻取功能进出饼图切片。如果向下钻取序列有空数据，则向下钻取后图表有空间放置html表

您可以连接到和事件以显示/隐藏/居中表格，甚至控制动画

const tables = {
  'chrome': document.getElementById('chrome'),
  'firefox': document.getElementById('firefox')
}

Highcharts.chart('container', {
  chart: {
    type: 'pie',
    events: {
      drilldown(e) {
        const table = tables[e.point.drilldown]

        table.style.display = 'block'

        const tableRect = table.getBoundingClientRect()
        const containerRect = this.container.getBoundingClientRect()

        table.style.left = (containerRect.left + (containerRect.width - tableRect.width) / 2) + 'px'
        table.style.top = (containerRect.top + (containerRect.height - tableRect.height) / 2) + 'px'
      },
      drillup(e) {
        Object.values(tables).forEach(table => table.style.display = 'none')
      }
    }
  },

  "series": [{
    "name": "Browsers",
    "colorByPoint": true,
    "data": [{
        "name": "Chrome",
        "y": 62.74,
        "drilldown": "chrome"
      },
      {
        "name": "Firefox",
        "y": 10.57,
        "drilldown": "firefox"
      }
    ]
  }],
  "drilldown": {
    "series": [{
        "name": "Chrome",
        "id": "chrome",
        "data": []
      },
      {
        "name": "Firefox",
        "id": "firefox",
        "data": []
      }
    ]
  }
});

---

活生生的例子：

请添加您的代码，以便我们更容易帮助您。非常感谢@morganfree。