在简单条形图中显示项目计数的简单仪表板答案

【问题标题】：Simple dashboard showing item count in simple bar charts在简单条形图中显示项目计数的简单仪表板
【发布时间】：2012-08-04 20:23:36
【问题描述】：

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

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

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

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

【问题讨论】：

标签： c# jquery asp.net dashboard

【解决方案1】：

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

我假设您正在渲染某种集合，比如在 Repeater 或 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，或者任何您喜欢的样式。

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

【讨论】：

谢谢。是的，我将绑定到一个集合，我不打算使用转发器，但我在阅读您的回复后，转发器听起来是个不错的方向。我仍然对如何用不同长度的条表示项目计数感到困惑。例如，我收藏中的第一个项目可能有 50 个项目，长度为 70 像素，项目 2 可能有 140 个项目，长度为 180 像素。你知道我会如何表示吗？
当然。我将有一个专门用于绑定到中继器的对象，其属性可以在后面的代码中计算，然后将其用作宽度的来源。编辑要显示的答案。