Plotly.js静态简单图表不显示，复杂动态图表正常的问题求助

嘿，这个问题其实挺常见的，我一眼就揪出了关键细节——你的静态图表脚本写在目标div之前了！

当浏览器从上到下解析页面时，执行到Plotly.newPlot('test_div', data, layout);这行代码的时候，<div id="test_div">还没被渲染到DOM里，Plotly找不到要挂载图表的元素，自然没法生成图表。而你的动态图表是通过$.get异步请求加载的，等请求完成回调执行时，整个页面已经渲染完毕，chartTemp_div早就存在了，所以能正常显示。

修复方案有两种，选哪种都可以： #

方案1：把静态图表脚本移到div之后

这是最简单的方法，确保目标DOM元素已经存在再执行Plotly代码：

<div id="test_div">HERE<br></div>
<script>
  var trace1 = {
    x:['2020-10-04', '2021-11-04', '2023-12-04'],
    y: [90, 40, 60],
    type: 'scatter'
  };
  var data = [trace1];
  var layout = {
    height: 400,
    width: 800,
    showlegend: false
  };
  Plotly.newPlot('test_div', data, layout);
</script>

方案2：用DOM就绪事件包裹代码

如果不想调整脚本位置，可以把代码放在DOM加载完成的回调里，确保所有元素都渲染后再执行：

<script>
  // 原生JS写法
  document.addEventListener('DOMContentLoaded', function() {
    var trace1 = {
      x:['2020-10-04', '2021-11-04', '2023-12-04'],
      y: [90, 40, 60],
      type: 'scatter'
    };
    var data = [trace1];
    var layout = {
      height: 400,
      width: 800,
      showlegend: false
    };
    Plotly.newPlot('test_div', data, layout);
  });
</script>
<div id="test_div">HERE<br></div>

要是你已经在使用jQuery，也可以用$(document).ready()代替DOMContentLoaded，效果完全一致。

以后写操作DOM的脚本时，记住这个小细节就不会再踩类似的坑啦！

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