Javascript JS图表在php循环中仅显示一次

我有一个脚本，其中许多数据库条目应该在一个框中一个接一个地显示。除了JavaScript代码在第一个框中只显示一次外，所有PHP变量在PHP循环中都能完美工作。在其他框中，我只看到空的div类

如何使每个框显示不同的图表及其值，而不是仅显示一个？ 以下是大致代码：

index.php:

<!--Other code-->


<?php
        
$query = "SELECT * FROM accounts WHERE user ='$user' ORDER BY date DESC";    
$results = $db->query($query);
    
while($row = mysqli_fetch_array($results)){ 
    
?> 


<div class="accounts">  
<p>Name: <?php echo $row['name']; ?></p>
<img class="icon" src="/icons/profile.png"> 

<div class="chart-box">

<link rel="stylesheet" href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
<script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script> 

<div id="my-chart" class="ct-chart ct-perfect-fourth"></div>

</div>
</div>

<script> 

var data = {
  series: [
    {
      data: [<?=$row['value1']?>, <?=$row['value2']?>, <?=$row['value3']?>, <?=$row['value4']?>] 
    }
  ]
};


var options = {
  axisX: {
  }
};


var responsiveOptions = [
  ['screen and (min-width: 641px) and (max-width: 1024px)', {
    showPoint: false,
    axisX: {
      labelInterpolationFnc: function(value) {
        return 'Week ' + value;
      }
    }
  }],
  ['screen and (max-width: 640px)', {
    showLine: false,
    axisX: {
      labelInterpolationFnc: function(value) {
        return 'W' + value;
      }
    }
  }]
];

new Chartist.Line('#my-chart', data, options, responsiveOptions);
   
</script> 



<?php    
}
?> 


<!--Other code-->

风险值数据={
系列：[
{
数据：[，，]
}
]
};
变量选项={
axisX：{
}
};
var响应选项=[
['屏幕和（最小宽度：641px）和（最大宽度：1024px）'{
卖点：错，
axisX：{
labelInterpolationFnc:函数（值）{
返回“周”+值；
}
}
}],
['屏幕和（最大宽度：640px）'{
展示线：错，
axisX：{
labelInterpolationFnc:函数（值）{
返回“W”+值；
}
}
}]
];
新图表列表线（“#我的图表”、数据、选项、响应选项）；

我在数据库中有4个用户，但图表仅为第一个框中的第一个用户显示

---

谢谢你的帮助

这是因为，您以相同的id（即，

id=“我的图表”

）瞄准每个图表

每个标签的Id都是唯一的。如果要为每个用户呈现图表，请尝试使用类而不是id来定位图表，或者您可以为每个用户生成唯一的id，例如