highcharts实现treegraph并根据节点的展开调整container的宽度

Highcharts是一个强大的JavaScript图表库，用于创建交互式图形，包括树形图（Tree Map）。要实现在Highcharts中根据节点展开调整容器宽度的功能，你可以使用其组合功能（series type as `tree` 或者 `treemap`），配合递归数据结构。以下是基本步骤：

1. **初始化Highcharts图表**：
首先，在HTML中包含Highcharts库，并设置一个div元素作为容器：

<div id="container" style="width: 100%; height: 400px;"></div>

2. **配置数据**：
使用嵌套的数据对象表示树形结构，每个节点都有一个children数组。例如：

var data = {
    name: '根',
    children: [
        {name: '子节点1', children: [{name: '孙子节点'}, ...]},
        {name: '子节点2', collapsed: true, children: []},
        // 更多子节点...
    ]
};

3. **选择tree图类型**：
在Highcharts初始化时，指定系列类型为`tree`，并传递数据：

Highcharts.chart('container', {
    series: [{
        type: 'tree',
        allowDrillToNode: false,
        data: [data]
    }]
});

4. **节点展开与收缩事件处理**：
Highcharts提供了一系列事件，如`beforeclicknode`, `afterclicknode`等，可以监听节点点击事件来动态调整容器宽度。当节点展开时，增加容器宽度；收起时减少宽度。这需要编写额外的自定义代码。

5. **调整容器宽度示例**：
使用`chart.container.adjustWidth()`函数来调整宽度。在`afterclicknode`事件回调中添加这一逻辑：

plotOptions: {
    tree: {
        point: {
            events: {
                afterclick: function (event) {
                    if (event.point.collapsed) {
                        event.point.expand();
                        chart.container.adjustWidth();
                    } else {
                        event.point.collapse();
                        chart.container.adjustWidth();
                    }
                }
            }
        }
    }
}

6. **兼容其他浏览器和API版本**：
确保你的Highcharts版本支持这些特性，如果不是最新版本，可能需要查阅文档或更新到最新版本。