Apex Charts刷新数据后饼图与图例重叠问题求助

问题现象 #

首次从API获取数据渲染饼图时布局正常，图例与图表互不干扰；但点击「刷新数据」按钮更新图表后，饼图出现偏移，与右侧图例重叠。

示例数据 #

[{
    "count": 11,
    "percent": 0.9166666666666666,
    "profanity": "none"
  },
  {
    "count": 0,
    "percent": 0,
    "profanity": "mild"
  },
  {
    "count": 0,
    "percent": 0,
    "profanity": "medium"
  },
  {
    "count": 0,
    "percent": 0,
    "profanity": "strong"
  },
  {
    "count": 1,
    "percent": 0.08333333333333333,
    "profanity": "extreme"
  }
]

相关代码 #

JavaScript #

// 创建空图表，仅在首次查询时调用，后续刷新/过滤直接更新已有图表
const createEmptyProfanityChart = () => {
  var options = {
    series: [],
    chart: {
      width: 380,
      height: 265,
      type: "pie",
      id: "profanity-chart",
    },
    labels: [],
    redrawOnParentResize: false,
    redrawOnWindowResize: false,
  };

  var chart = new ApexCharts(
    document.querySelector("#profanity-chart"),
    options
  );
  chart.render();
};

// 更新图表数据
const updateProfanityChart = (data) => {
  let extremeCount;
  let strongCount;
  let mediumCount;
  let mildCount;
  let noneCount;

  // 遍历数据整理各分类计数
  data.profanity_list.forEach((item) => {
    switch (item.profanity) {
      case "none":
        noneCount = item.count;
        break;
      case "mild":
        mildCount = item.count;
        break;
      case "medium":
        mediumCount = item.count;
        break;
      case "strong":
        strongCount = item.count;
        break;
      case "extreme":
        extremeCount = item.count;
        break;
    }
  });

  let countsArr = [
    extremeCount,
    strongCount,
    mediumCount,
    mildCount,
    noneCount,
  ];

  let labelsArr = ["Extreme", "Strong", "Medium", "Mild", "None"];

  ApexCharts.exec("profanity-chart", "updateSeries", countsArr, true);

  ApexCharts.exec(
    "profanity-chart",
    "updateOptions", {
      labels: labelsArr,
    },
    false,
    true
  );
};

// 首次加载时创建空图表
if (initialFetch === false) {
  createEmptyChart()
}

// 更新图表数据
populateChart(data)

CSS #

.stats-card-container {
  width: 400px;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #ddd;
  position: relative;
  border-radius: 0.8rem;
  overflow: clip;
}

.stats-cards-row {
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 3rem;
  margin-top: 1rem;
  column-gap: 1rem;
}

.stats-card-header {
  height: 40px;
  background-color: var(--main-orange-th-color);
  padding: 8px;
  display: flex;
  align-items: center;
  font-weight: 600;
}

.stats-chart-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}

#no-data__stats {
  text-align: center;
  margin-top: 2rem;
}

HTML #

<!-- Row 1 -->
<div id="stats-cards-row-1" class="stats-cards-row">
  <!-- Bent -->
  <div id="bent-card-container" class="stats-card-container">
    <div id="bent-card-header" class="stats-card-header">
      Philosophical Bent
    </div>
    <div id="bent-chart-container" class="stats-chart-container">
      <div id="bent-chart"></div>
    </div>
  </div>
  <!-- /Bent -->
  <!-- Profanity -->
  <div id="profanity-card-container" class="stats-card-container">
    <div id="profanity-card-header" class="stats-card-header">
      Profanity
    </div>
    <div id="profanity-chart-container" class="stats-chart-container">
      <div id="profanity-chart"></div>
    </div>
  </div>
  <!-- /Profanity -->
</div>
<!-- /Row 1-->

修复方案 #

1. 合并更新操作，避免分步重绘 #

当前代码分开调用updateSeries和updateOptions，两次重绘易导致布局计算异常。建议合并成一次更新：

const updateProfanityChart = (data) => {
  // 保留原数据整理逻辑
  let extremeCount;
  let strongCount;
  let mediumCount;
  let mildCount;
  let noneCount;

  data.profanity_list.forEach((item) => {
    switch (item.profanity) {
      case "none": noneCount = item.count; break;
      case "mild": mildCount = item.count; break;
      case "medium": mediumCount = item.count; break;
      case "strong": strongCount = item.count; break;
      case "extreme": extremeCount = item.count; break;
    }
  });

  let countsArr = [extremeCount, strongCount, mediumCount, mildCount, noneCount];
  let labelsArr = ["Extreme", "Strong", "Medium", "Mild", "None"];

  // 合并更新系列和配置，一次完成重绘
  ApexCharts.exec("profanity-chart", "updateOptions", {
    series: countsArr,
    labels: labelsArr
  }, true);
};

2. 开启容器尺寸监听 #

关闭redrawOnParentResize会导致容器尺寸变化后图表无法重新计算布局，建议开启：

const createEmptyProfanityChart = () => {
  var options = {
    series: [],
    chart: {
      width: 380,
      height: 265,
      type: "pie",
      id: "profanity-chart",
    },
    labels: [],
    redrawOnParentResize: true,
    redrawOnWindowResize: true,
  };

  var chart = new ApexCharts(
    document.querySelector("#profanity-chart"),
    options
  );
  chart.render();
};

3. 手动触发尺寸重计算 #

在更新数据后强制图表重新计算尺寸：

const updateProfanityChart = (data) => {
  // 保留数据整理和更新逻辑
  // ...

  const chart = ApexCharts.getChartByID("profanity-chart");
  chart.resize();
};

4. 调整容器CSS约束 #

stats-card-container的overflow: clip可能限制图表重绘时的尺寸计算，可临时改为overflow: visible测试，确认问题后再优化布局。

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