如何在中继器中添加Canvas标签

本文关键字：添加 Canvas 标签 中继器 | 更新日期: 2023-09-27 18:17:15

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

如何在中继器中添加Canvas标签

你需要做的第一件事是确保每个画布都有一个唯一的ID。您可以通过将ItemIndex添加到id来实现。

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

之后，您可以使用javascript来构建图表。在这里，您使用<%= Repeater1.Items.Count %>来获得总项目计数。

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