Highcharts图表重叠问题：饼图与面积百分比图无法并排

安全阿岳

2026-7-24

饼图覆盖面积图的原因及修复方案

常见错误原因

容器布局未做并排处理：默认HTML元素为块级显示，两个图表容器会上下排列；若代码中给容器设置了绝对定位，或未用flex/grid/float实现横向布局，后渲染的饼图就会覆盖在面积图上方。
图表容器ID重复：如果两个Highcharts.chart()调用使用了同一个容器ID，后初始化的饼图会替换先渲染的面积图，表现为覆盖效果。
容器宽度未明确设置：未给每个容器指定width: 50%，或父容器未设置合适宽度，导致两个容器宽度重叠，出现覆盖。

修复示例代码

HTML结构

<!-- 父容器用于控制并排布局 -->
<div class="chart-wrapper">
  <!-- 饼图容器 -->
  <div id="pie-container" class="chart-box"></div>
  <!-- 面积百分比图容器 -->
  <div id="area-container" class="chart-box"></div>
</div>

CSS布局

.chart-wrapper {
  display: flex; /* 使用flex实现横向并排 */
  width: 100%;
}

.chart-box {
  width: 50%; /* 每个容器占父容器50%宽度 */
  height: 400px; /* 固定图表高度，可按需调整 */
}

Highcharts初始化代码

// 初始化饼图
Highcharts.chart('pie-container', {
  chart: {
    type: 'pie'
  },
  title: {
    text: '饼图示例'
  },
  series: [{
    name: '数据',
    data: [
      ['分类1', 30],
      ['分类2', 20],
      ['分类3', 50]
    ]
  }]
});

// 初始化面积百分比图
Highcharts.chart('area-container', {
  chart: {
    type: 'area'
  },
  title: {
    text: '面积百分比图示例'
  },
  yAxis: {
    labels: {
      formatter: function() {
        return this.value + '%';
      }
    },
    min: 0,
    max: 100
  },
  series: [{
    name: '百分比数据',
    data: [15, 30, 45, 60, 75, 90]
  }]
});