如何在 HTML 页面中放置 IIFE 图表？

Question

图表没有显示在我放置图表脚本片段的元素中。相反，它出现在所有 HTML 个元素之后的页面底部。

脚本放在这里：

<body>
   <div1>
       <div2>
           <script>CHART SCRIPT</script>
       </div2>
   </div1>
</body>

却出现在DIV之外，如：

<body>
   <div1>
       <div2>
           <script>CHART SCRIPT</script>
       </div2>
   </div1>
   [CHART DISPLAYING HERE]
</body>

Answer 1

这真的取决于脚本中的代码。它可能正在调用这样的代码：

document.body.appendChild(element);

这会将图表添加到正文中。如果您能够编辑脚本代码，请将其更改为如下内容：

<body>
   <div1>
       <div2 id='chat-holder'>
           <script>
           /* I am guessing that your script creates 
              an element for the chart and will 
              refer to it as chartElement. 
              Change the name if needed */
           var chartHolder = document.getElementById('chart-holder');
           chartHolder.appendChild(chartElement);
           </script>
       </div2>
   </div1>
</body>

Answer 2

调用 LightningChart JS 的脚本元素的位置与图表的位置无关。

如果您考虑一下，这是合乎逻辑的，因为一个脚本可以创建多个图表，这些图表可以很好地放在网页的不同位置。

要将图表放置在您选择的 DIV 元素上，请在创建图表时指定 DIV：

<body>
   <div>
       <div id = 'chart-container'></div>
   </div>
   <script>
       const chart = lightningChart().ChartXY({
           container: document.getElementById('chart-container')
       })
   </script>
</body>

如何在 HTML 页面中放置 IIFE 图表？

How do I position IIFE charts within an HTML page?

html

lightningchart