c# - 在简单条形图中显示项目计数的简单仪表板

Question

我正在尝试构建一个非常简单的仪表板图表来显示某人拥有多少未完成的项目。就像是：

item 1 ------------------ (54 items)
item 2 ---------------------------------(74 items)
item 2 -------(10 items)

理想情况下，我希望用简单的彩色条代替破折号。

我搜索了谷歌，但可能使用了错误的搜索词。我更喜欢 C# 解决方案，但如果需要，我很乐意使用 JQuery。

Answer 1

我需要更多信息来专门解决这个问题，但这里有一些想法：

我假设您正在呈现某种集合，例如在中继器或 Gridview 中？

如果您不使用它，我会推荐一个中继器，因为它可以在这种情况下做一些非常具体的事情，这里有一个例子：

   <asp:Repeater id=Repeater1 runat="server">
      <HeaderTemplate>
         <table>
      </HeaderTemplate>

      <ItemTemplate>
         <tr>
            <td> 
               <%# DataBinder.Eval(Container.DataItem, "Name") %>
               <span class='backgroundBar' style='width:<%# DataBinder.Eval(Container.DataItem, "Count") %>px;'>&nbsp;</span>
               (<%# DataBinder.Eval(Container.DataItem, "Count") %> items)
            </td>
         </tr>
      </ItemTemplate>

      <FooterTemplate>
         </table>
      </FooterTemplate>

   </asp:Repeater>

然后

Object[] values = new Object[];

Repeater1.DataSource = values;
Repeater1.DataBind();

您可以将虚线替换为带有背景图像的某种 div 或任何您喜欢的样式。

** 确保在样式属性中使用单引号，因为双引号会引发内联代码错误 **