document.getElementByID（ "div"）に値を追加します。

Question

私はforループを使ってchart.jsで複数のグラフを作成しようとしています。私は、データをロードするために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 

基本的に、関連するグラフごとに「piechart」+ nを選択する必要があります。 getDocumentByIdを呼び出し、値またはデータIDを追加するにはどうすればよいですか？

アイデア？ ありがとう！あなたはjQueryのを使用できる場合

Answer 1

で始まるあなたの divの配列を持っています

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を経由して直接標的とすることができるように、それはおそらくpiechartsにクラスを追加することを検討する価値がありますあなたのチャーミングライブラリ。

<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> 

Answer 2

：

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

あなたはネイティブJavaScriptを使用したい場合：今

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

を、あなたはそれらのidがpiechart