javascript - 如何在图像上添加图表

Question

我的 div 中有一张图片。图片看起来不像方框。现在我想在图片上插入条形图(highchart 库动态内容)。我的意思是在方框图片内。该怎么做？

我尝试了什么

<div class="" style="position:relative">
<div style="position:absolute; top:0; left:0">
<img class="" src="img/card1.png" alt="" style="width:400px;" />
</div>
<div style="position:absolute; top:250px;">
<img class="" src="img/card1.png" alt="" style="width:400px;" />
</div>
<div style="position:absolute; top:500px;">
<img class="" src="img/card1.png" alt="" style="width:400px;" />
</div>
</div>

这里的card1.png是方框图片，一共有三张卡片，我需要在三个方框内分别插入三个图表。

Answer 1

您发送的代码非常丑陋，并且没有以正确的方式使用 CSS。你想在另一个文件中分离 CSS，并用 LINK 标签将它包含到你的 html 中。您想使用级联样式表，这样您就不必多次重复相同的代码。

但是如果你想坚持使用这种类型的代码，你可以这样做:

<div class="" style="position:relative; width: 400px; height: 750px;">
  <div style="position:absolute; top:0; left:0; z-index: 1;">
    <img class="" src="img/card1.png" alt="" style="width:400px;" />
  </div>
  <div style="position:absolute; top:0; left:0; z-index: 2;">
    Your first chart goes here
  </div>
  <div style="position:absolute; top:250px; left:0; z-index: 1;">
    <img class="" src="img/card1.png" alt="" style="width:400px;" />
  </div>
  <div style="position:absolute; top:250px; left:0; z-index: 2;">
    Your second chart goes here
  </div>
  <div style="position:absolute; top:500px; left:0; z-index: 1;">
    <img class="" src="img/card1.png" alt="" style="width:400px;" />
  </div>
  <div style="position:absolute; top:500px; left:0; z-index: 2;">
    Your third chart goes here
  </div>
</div>