plotly.js

Question

相信我，我很想问这个问题。

考虑这两个 plotly.js 图。最上面的是来自 plot.ly 网页的“复制粘贴”，但未显示。下一个，通过 php | 生成mysql | json，已显示。我无法理解我做错了什么。

可能这是非常简单的事情，我当然只是对一些显而易见的事情视而不见。

<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>      
<div id="test_div">HERE<br></div>

<script>
   var layout1 = {
     height: 400,
     width: 800,
     margin: {
               l: 30,
               r: 0,
               b: 20,
               t: 10,
               pad: 0 
     },
     showlegend: true,
     displayModeBar: false,
     legend: {
       x: 0.075,
       y: .9,
       bgcolor: "#E2E2E2",
       bordercolor: "#555555",
       borderwidth: 1
     }
   };  
   $.get('json-temp.php', null, function(data) { Plotly.newPlot('chartTemp_div', data, layout1); }, "json");
</script>      
<div id="chartTemp_div" >THERE<br></div>

正如您在下图中看到的，显示了 'test_div' 的文本，但没有显示情节，并且调用外部 php 文件（最终使用 'echo json_encode($data);').

如果有人能指出正确的方向，我将不胜感激。

Answer 1

也许第一个电话在 DOM 准备好之前就已经接通了。我会尝试将 <div id="test_div">HERE<br></div> 放在 <script> 之上，或者将 Plotly.newPlot 调用包装在 $(function() { ... }); 中，以便仅在 DOM 准备就绪时调用它。

plotly.js - 简单静态图未显示，但复杂的静态图显示

plotly.js - simple static graph is not show but the complicated one is