将值附加到document.getElementByID（“div”）;

-1

我期待通过chart.js创建多个图表for循环。我使用PHP框架Laravel加载数据和所述数据是每个元素中，但我有该图表被画布标记内绘制一个问题追加每个元素的数量到画布ID将值附加到document.getElementByID（“div”）;

<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

基本上，我需要为每个关联图表选择“饼图”+ n。我怎样才能调用getDocumentById并附加一个值或数据ID？

任何想法？谢谢！

来源

2016-09-13 Dazzle

您可以使用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>

来源

2016-09-13 17:59:57 iblamefish

如果你可以使用jQuery：

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

如果你想使用本地JavaScript：

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

现在

，你有你的div的数组，他们的id开始piechart

来源

2016-09-13 17:46:03 Mojtaba

将值附加到document.getElementByID（“div”）;

回答

相关问题