Javascript 将值追加到document.getElementByID（“div”）；

我希望通过chart.js和for循环创建多个图表。我使用PHP框架Laravel加载数据，数据在每个元素中，但在将每个元素的编号附加到画布ID时遇到一个问题

正在画布标记中绘制图表

<canvas 
   id="piechart{{ $article->id }}"
   value=" {{ $article->id }}"
   data-id="{{ $article->id }}"
   data .... 
</canvas>

<script type="text/javascript">
var chart = document.getElementsById("piechart");
// chart stuff

如果可以使用jQuery：

var charts = $('div[id^="piechart"]');

如果要使用本机JavaScript：

var charts = document.querySelectorAll('div[id^="piechart"]');

现在，您有了一个
div
数组，它们的
id
以
piechart
开头，您可以使用该数组获得与CSS选择器匹配的元素数组

然后，当您拥有这些图表时，您可以使用该属性来获取和设置每个图表上的数据

var charts = document.querySelectorAll("canvas[id^=piechart]");

charts.forEach(function (chart) {
  // get a value with dataset.value. NOTE: data-id="x" maps to dataset.id
  var id = chart.dataset.id;

  // set some data
  chart.dataset.name = "Chart with ID " + id;

  // chart is the DOM element, so has all the usual properties, e.g. 
  chart.width = 100;
  chart.height = 100;
});


旁注：

可能值得考虑在piecharts中添加一个类，这样就可以将它们作为一个组进行选择和设置样式，但可以根据您的图表库的需要，通过它们的ID直接定位

<canvas 
    id="piechart{{ $article->id }}"
    value=" {{ $article->id }}"
    data-id="{{ $article->id }}"
    class="piechart">
</canvas>

<script type="text/javascript">
    var charts = document.querySelectorAll(".piechart");

    charts.forEach(function (chart) {
        // snip
    });
</script>


var图表=document.queryselectoral（“.piechart”）；
图表。forEach（函数（图表）{
//剪断
});