如何在直放站內添加Canvas標籤

Question

使用chartjs在直放站內成功生成一個餅圖。 想要顯示中繼器內所有項目的餅圖。 請讓我知道好方法來處理這種情況

代碼結構：

目前第一中繼記錄生成餅圖。

<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

您需要做的第一件事就是確保每個畫布都有唯一的ID。您可以通過將ItemIndex添加到該ID來完成此操作。

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

之後，您可以使用JavasScript來構建圖表。在那裏，您使用<%= Repeater1.Items.Count %>來獲取總項目數。

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