HTML+jQuery开发的amCharts折线图在模态框中无法占满高度怎么办

问题根因 #

• 图表容器#data_chart未显式设置高度，块级元素默认高度由内容撑开，amCharts默认会使用固定 fallback 高度
• 若图表在模态框显示前初始化，此时模态框处于display: none状态，amCharts无法读取到容器的实际可用高度，导致渲染高度异常
• 未给图表配置占满容器的宽高属性

操作步骤 #

1. 补充容器CSS样式 #

给模态框内容区域和图表容器添加高度规则：

.modalContent {
  /* 按需调整模态框内容高度，也可使用vh相对单位如height: 80vh */
  height: 600px;
  padding: 20px;
  box-sizing: border-box;
}
#data_chart {
  width: 100%;
  /* 减去关闭按钮占用的高度，按需调整数值 */
  height: calc(100% - 24px);
}

2. 调整图表初始化逻辑 #

首先修改模态框触发逻辑，在模态框完全显示后再初始化图表，或显示后触发图表重绘：

// 模态框显示触发逻辑示例
$('#myModal').show();
// 等待DOM渲染完成后操作
setTimeout(() => {
  if (window.chart) {
    // 图表已初始化，触发重绘适配尺寸
    window.chart.invalidateSize();
  } else {
    // 首次渲染图表
    renderChart();
  }
}, 10);

再修改renderChart函数，把chart实例暴露到全局方便调用，并且配置图表占满容器：

function renderChart() {
  // 原有数据处理逻辑保持不变
  var len = data_obj["trend"]["x"].length;
  var trend_data = []
  for (var i=0; i<len; i++){
    var d = new Date(data_obj["trend"]["x"][i]);
    var t = {"date": d, "value": data_obj["trend"]["y"][i]};
    trend_data.push(t)
  };

  var chart = am4core.create("data_chart", am4charts.XYChart);
  // 新增以下2行宽高配置
  chart.width = am4core.percent(100);
  chart.height = am4core.percent(100);
  // 把chart实例挂到全局方便外部调用重绘方法
  window.chart = chart;

  // 原有图表配置逻辑保持不变
  chart.data=trend_data;
  var title = chart.titles.create();
  title.text = "Pulse Index";
  title.marginBottom = 30;
  title.fontSize = 16;
  var dateAxis_line = chart.xAxes.push(new am4charts.DateAxis());
  dateAxis_line.renderer.inside = true;
  dateAxis_line.renderer.grid.template.disabled = true;
  var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
};

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