ApexChart容器Div的动画显隐异常问题及优化方案咨询

我是编程新手，自学开发个人项目时，用ApexChart展示不同时段的数据，创建了4个对应不同时段的Div。通过下拉框选择时段后，需要隐藏所有未选中的Div，仅显示选中的Div。用show()/hide()方法实现时出现异常：首次选择“Last Month”能正常显示对应Div，切换到“Current Month”也能隐藏上月Div并显示本月Div，但再次选择“Last Month”时，对应Div及其中的ApexChart无法显示。现咨询带动画的更优实现方式。

现有代码 #

HTML部分 #

<div id="totalMilksaleChartfor7days"></div>
<div id="totalMilksaleChartcurrentmonth" style="display:none"></div>
<div id="totalMilksaleChartlastmonth" style="display:none"></div>
<div id="totalMilksaleChart" style="display:none"></div>

JavaScript部分 #

var durationget = duration;

if (durationget == "currentmonth") {
  $("#totalMilksaleChartcurrentmonth").show();
  $("#totalMilksaleChartfor7days").hide();
  $("#totalMilksaleChartlastmonth").hide();
  $("#totalMilksaleChart").hide();
} else if (durationget == "lastmonth") {
  $("#totalMilksaleChartlastmonth").show();
  $("#totalMilksaleChartfor7days").hide();
  $("#totalMilksaleChartcurrentmonth").hide();
  $("#totalMilksaleChart").hide();
} else if (durationget == "currentyear") {
  $("#totalMilksaleChart").show();
  $("#totalMilksaleChartfor7days").hide();
  $("#totalMilksaleChartlastmonth").hide();
  $("#totalMilksaleChartcurrentmonth").hide();
} else {
  $("#totalMilksaleChartfor7days").show();
  $("#totalMilksaleChartlastmonth").hide();
  $("#totalMilksaleChartcurrentmonth").hide();
  $("#totalMilksaleChart").hide();
}

问题原因 #

ApexChart依赖容器的尺寸进行渲染，当用hide()方法设置display:none后，容器尺寸会丢失，再次show()时图表无法自动重绘，导致显示异常。

优化实现方案（带动画+修复显示问题） #

1. 核心思路 #

用CSS类控制显示/隐藏（替代show()/hide()），通过过渡动画实现平滑切换，同时避免容器尺寸丢失；逻辑上简化代码，减少重复操作。

2. 具体实现 #

第一步：调整HTML结构

给所有图表容器添加统一类名chart-container，默认只显示7天的图表：

<div id="totalMilksaleChartfor7days" class="chart-container active"></div>
<div id="totalMilksaleChartcurrentmonth" class="chart-container"></div>
<div id="totalMilksaleChartlastmonth" class="chart-container"></div>
<div id="totalMilksaleChart" class="chart-container"></div>

第二步：添加CSS动画样式

用opacity和height的过渡实现平滑动画，避免display:none导致的尺寸丢失：

.chart-container {
  opacity: 0;
  height: 0;
  overflow: hidden;
  transition: opacity 0.3s ease, height 0.3s ease;
}

.chart-container.active {
  opacity: 1;
  height: auto;
}

第三步：简化JavaScript逻辑

// 获取所有图表容器
const chartContainers = document.querySelectorAll('.chart-container');

function switchChart(duration) {
  // 移除所有容器的激活类
  chartContainers.forEach(container => container.classList.remove('active'));

  // 确定目标容器ID
  let targetId = '';
  switch(duration) {
    case 'currentmonth':
      targetId = 'totalMilksaleChartcurrentmonth';
      break;
    case 'lastmonth':
      targetId = 'totalMilksaleChartlastmonth';
      break;
    case 'currentyear':
      targetId = 'totalMilksaleChart';
      break;
    default:
      targetId = 'totalMilksaleChartfor7days';
  }

  // 给目标容器添加激活类
  document.getElementById(targetId).classList.add('active');

  // 若仍有图表显示问题，可强制重绘（需提前保存图表实例）
  // 示例：if(duration === 'lastmonth') lastMonthChartInstance.render();
}

3. jQuery版本适配（如果继续用jQuery） #

function switchChart(duration) {
  $('.chart-container').removeClass('active');
  
  let targetId = '';
  switch(duration) {
    case 'currentmonth':
      targetId = '#totalMilksaleChartcurrentmonth';
      break;
    case 'lastmonth':
      targetId = '#totalMilksaleChartlastmonth';
      break;
    case 'currentyear':
      targetId = '#totalMilksaleChart';
      break;
    default:
      targetId = '#totalMilksaleChartfor7days';
  }
  
  $(targetId).addClass('active');
  
  // 强制重绘示例：if(duration === 'lastmonth') lastMonthChart.render();
}

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