Highcharts地图特定位置添加柱状图可行性及问题咨询

当然可行！你碰到的覆盖问题，是因为替换饼图时没给柱状图设置正确的尺寸、定位和容器约束，按下面的步骤就能解决：

• 给每个地图点生成专属小容器：地图加载完成后，遍历需要添加柱状图的地图点，为每个点创建一个绝对定位的div容器。用地图实例的toPixels()方法，把地图点的相对坐标转换成页面坐标，以此设置容器的left和top样式，确保柱状图精准定位在点上。
• 约束小柱状图的尺寸与冗余组件：创建柱状图时，手动设置chart.width和chart.height为小尺寸（比如100px），同时关闭标题、图例、坐标轴等不需要的组件，避免图表溢出容器。
• 适配地图交互：监听地图的redraw事件，当地图缩放或平移时，重新计算所有小容器的位置，保证柱状图始终跟着地图点移动。

示例代码片段：

// 假设mapChart是已初始化的地图实例
mapChart.series[0].points.forEach(point => {
    // 创建小容器
    const chartContainer = document.createElement('div');
    chartContainer.style.position = 'absolute';
    chartContainer.style.width = '100px';
    chartContainer.style.height = '100px';
    
    // 转换地图点坐标为页面坐标，让图表居中显示在点上
    const pointPos = mapChart.toPixels(point.plotX, point.plotY);
    chartContainer.style.left = `${pointPos.x - 50}px`;
    chartContainer.style.top = `${pointPos.y - 50}px`;
    
    document.body.appendChild(chartContainer);

    // 初始化小柱状图
    Highcharts.chart(chartContainer, {
        chart: {
            type: 'column',
            width: 100,
            height: 100,
            margin: [0, 0, 0, 0]
        },
        title: { text: null },
        legend: { enabled: false },
        xAxis: { visible: false },
        yAxis: { visible: false, min: 0 },
        series: [{
            data: [12, 28, 15] // 替换成你的柱状图数据
        }]
    });
});

// 监听地图重绘，更新柱状图位置
mapChart.events.redraw = function() {
    document.querySelectorAll('[style*="width: 100px"]').forEach((container, index) => {
        const point = this.series[0].points[index];
        const pointPos = this.toPixels(point.plotX, point.plotY);
        container.style.left = `${pointPos.x - 50}px`;
        container.style.top = `${pointPos.y - 50}px`;
    });
};

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