Hinzufügen von Canvas-Tag innerhalb des Repeaters

Question

Mit chartjs wurde erfolgreich ein Kreisdiagramm im Repeater erstellt. möchten Kreisdiagramm für alle Artikel im Repeater anzeigen. Bitte lassen Sie mir guten Ansatz kenne dieses Szenario zu behandeln

-Code-Struktur:

Derzeit erster Repeater Rekord Kreisdiagramm erzeugen.

<asp:repeater id="Repeater1" runat="server> 
<ItemTemplate> 
<table> 
<tr> 
    <td>Another repeater code</td> 
    <td> 
     <div> 
     <canvas id="mychart"></canvas> 
     </div> 
    </td> 
</tr> 
</table> 
</ItemTemplate> 
</asp:repeater> 

Answer 1

Das erste, was Sie tun müssen, ist sicherzustellen, dass jede Leinwand eine eindeutige ID hat. Sie können das tun, indem Sie die ItemIndex der ID hinzufügen.

<canvas id="mychart_<%# Container.ItemIndex %>"></canvas> 

Danach können Sie JavasScript verwenden, um die Diagramme zu erstellen. Dort verwenden Sie <%= Repeater1.Items.Count %>, um die Gesamtzahl der Elemente zu erhalten.

<script type="text/javascript"> 
    $(document).ready(function() { 
     for (var i = 0; i < <%= Repeater1.Items.Count %>; i++) { 
      buildCanvas("mychart_" + i); 
     } 
    }); 
</script>