將值附加到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」）;

回答

相關問題