Question

我希望通过带有for循环的chart.js创建多个图表。我使用PHP Framework Laravel加载数据，数据在每个元素内，但我有一个问题是将每个元素的数量附加到画布ID

图表正在画布标记中绘制

tabBarVC

基本上，我需要选择＆＃34;饼图＆＃34;每个关联图表+ n。如何调用getDocumentById并附加值或数据ID？

有什么想法吗？谢谢！

Answer 1

如果你可以使用jQuery：

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

如果您想使用原生JavaScript：

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

现在，您有一个div的数组id以piechart开头

Answer 2

您可以使用document.querySelectorAll来获取与CSS选择器匹配的元素数组。

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

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;
});

旁注：

可能值得考虑在饼图中添加一个类，以便可以选择它们并将其设置为一个组，但可以直接通过其图表库所需的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>

将值附加到document.getElementByID（＆＃34; div＆＃34;）;

2 个答案: