Javascript 在一页上显示多个折线图

我在一个页面上显示多个图形时遇到了一些问题

在我的html/php模板中，我有以下内容

<?php
    foreach($charts as $chart) {
        echo '<canvas class="chart" id="'.$chart['id']" width="700" height="200"></canvas>';
    }
?>

问题是，如果循环中有两个图表，那么两个图表中都会显示相同的数据

我对JS非常陌生，所以我可能完全错了

但看起来阴谋破坏实际上什么都没做

---

如果有人有任何见解，我将不胜感激。

下面这行是多余的

var ctx = document.getElementById($this.attr('id'));

相反，

$this

变量已经是指向元素的指针

意思-你可以做：

var plot = new Chart($this, {
    type: 'line',
    data: data,
});

---

我的猜测是php没有创建两个不同的ID，javascript被弄糊涂了。

请看，共识是“不，他们不应该”！您应该查看html的源代码，以确保元素获得不同的ID

var plot = new Chart($this, {
    type: 'line',
    data: data,
});