概述:
(更新 12/04/07: 另一个有意思的资源结尾处加上链接地址这通过一个非常有趣的 web 部件的另一个博客)
此博客条目描述了如何在 SharePoint 中创建条形图. 这在 WSS 和苔藓的环境中工作,因为它只取决于数据视图 web 部件.
总体方法是,如下所示:
- 创建列表或文档库,其中包含您想要绘制的图形的数据.
- 关联的文档库的地方 / 自定义列表拖到页上并将其转换为一个数据视图 web 部件 (DVWP).
- 修改 DVWP 的 XSL 生成 HTML,它显示的图形.
业务方案 / 安装程序:
我创建了一个自定义列表与标准的标题列和一个额外的列, "地位". 此模型 (很简单) "授权费用" 其中标题表示项目和地位值的列表中的场景:
- 建议
- 在过程中
- 停滞
目的是要产生互动的水平条形图,显示了这些状态代码.
我有填充列表,它看起来像这样:
创建数据视图 Web 部件:
通过向页中添加的自定义列表创建 DVWP (我的案子在网站页面) 按照说明进行操作 在这里 (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!395.entry).
除了简单地创建 DVWP, 我们还需要设置分页属性,以显示所有可用行. 对我来说, 这看起来像这样的东西:
在这一点, 我始终关闭 SPD 和浏览器. 然后重新打开使用浏览器的页. 这样可以避免不小心弄在页面上 web 部件布局.
修改 XSLT:
现在是时候要修改 XSLT.
我总是使用 visual studio 为此. (请参阅 在这里 为将帮助你很多的智能感知有关的重要说明).
创建一个空的项目添加四个新文件 (改为"原始" 以及"新" 在适当情况下):
- Original.xslt
- New.xslt
- 原 Params.xml
- 新 Params.xml
以我为例, 它看起来像这样:
修改 web 部件和复制 params 和 XSL 到"原始" 在 Visual Studio 的版本.
在这里的目标是导致的 XSL 转换的结果,我们从回来的 DVWP 查询到 HTML 呈现为一个图.
为此目的, 它有助于首先考虑什么 HTML 应该看起来像之前我们被称为"XSL"疯狂迷惑. (要弄清楚, 以下是只是一个例子; 不要键入或复制/粘贴到 visual studio 中. 我提供充分的打击,后来在那写-向上的切入点). 下面的示例图呈现 HTML 后立即按:
相应的 HTML:
<html> <正文> <中心> <表宽度 = 80%> <tr><运输署><中心>水平条形图</运输署></tr> <tr> <td 对齐 ="中心"> <表格边框 ="1" 宽度 = 80%> <tr> <td 宽度 = 10%>打开</运输署> <运输署><表 cellpadding ="0" 格 ="0" 边境 = 0 宽度 = 50%><背景色 tr = 红色><运输署>&n b s p;</运输署></tr></表></运输署> </tr> <tr> <td 宽度 = 10%>关闭</运输署> <运输署><表 cellpadding ="0" 格 ="0" 边境 = 0 宽度 = 25%><背景色 tr = 红色><运输署>&n b s p;</运输署></tr></表></运输署> </tr> <tr> <td 宽度 = 10%>停滞</运输署> <运输署><表 cellpadding ="0" 格 ="0" 边境 = 0 宽度 = 25%><背景色 tr = 红色><运输署>&n b s p;</运输署></tr></表></运输署> </tr> </表> </运输署> </tr> </表> </正文> </html> |
我用一个死简单的方法,对通过设置为"红色"行的背景颜色创建我的酒吧.
这是这里的外卖: 在结束, 我们所做的一切创建 HTML 具有行和列.
XSLT 模板:
我已经复制的 XSLT 生成水平条形图. 它是相当好注释掉,因此我不会加在你那多在这里除了这些笔记:
- 我开始与默认 SharePoint 设计师给了我,当我第一次创建 DVWP 的 XSL.
- 我是能够把这个切从 SPD 的 657 行到 166 线条.
- 使用参数的 XML 文件不乱 (这是分开的 XSL,你就知道当你去修改 DVWP 本身意味着什么; 有两个文件,您可以修改). 不过, 为了简化它, 我删除几乎所有人都从 XSL. 这意味着,如果您想要使用这些参数, 你只需要将其变量定义添加回 XSL. 这将是容易,因为你将有原始的 XSL 变量定义在您的 visual studio 项目.
- 你应该能够复制并粘贴这直接到您的 visual studio 项目. 然后, 我的电话中删除和插入来电转接到"ShowBar".
- 钻取通过创建工程 <href> 喜欢这个: http://server/List?FilterField1=fieldname&FilterValue1=actualFilterValue. 这种技术可能在其他上下文中的价值. 在第一次, 我想我有必要以符合一个更复杂的格式: http://server/List/AllItems.aspx?View={guid}&FilterField1=blah&FilterValue1=blah, 但在我的环境,这不是必要. 此列表中的 URL 通过 SharePoint 被传递给我们,所以这是很容易概括.
它在这儿:
<xsl:样式表 版本="1.0" 排除-结果-前缀="rs z o s ddwrt dt msxsl" |
结果:
从上面的 XSL 生成此图:
钻取到的基础数据通过点击的状态代码:
思想总结:
可这被普遍?
我爱这个图形的概念, 但我讨厌的事实是,我不得不进去,做这么多的手动编码. 我已经很少考虑到它是否可以被推广也乐观, 但我也有点害怕的时候,可能是某处的道路上不会提供任何变通的砖墙. 如果任何人有一些好的点子上这, 请在评论中记或 电子邮件通知我.
垂直图:
这是一个水平条形图. 很有可能要创建一个垂直图. 我们只需要更改 HTML. 我会开始以同样的方式: 创建 HTML 表示形式的垂直条形图,然后找出如何获得,通过 XSL. 如果任何人有兴趣, 我能说服试试,处理掉这些问题. 如果某人已经做了,, 请让我知道,我很乐意链接到您的博客🙂
我认为一个垂直图的挑战,是图的标签更难管理, 但当然不是不可能.
字段名称疑难杂症的:
有至少两个事情要寻找与你的字段名称.
第一次, 带有空格的字段名称已在 XSL 转义. 这可能是一个问题在这里:
<xsl:变量 名称="totalProposed"
请选择="计数(/dsQueryResponse/行/列[正常化空间(@Status) = '建议'])" />
如果您的状态"" 列的名字就是"状态代码" 然后您需要引用它作为"Status_x0020_Code":
<xsl:变量 名称="totalProposed"
请选择="计数(/dsQueryResponse/行/列[正常化空间(@Status_x0020_Code) = '建议'])" />第二次, 我对此有点模糊, 但你也必须要对字段名称更改的通知. 如果你的名字你的领域"状态代码" 再后来上, 将它重命名为"AFE 状态", "内部名称" 不会更改. 内部名称仍将"状态代码" 并且必须引用作为"Status_x0020_Code". "其他资源" 链接可帮助诊断和纠正这种问题.
关于那种颜色:
我拿起"红" 因为它是我喜欢的那一刻. 它不会是一个大问题来显示不同的颜色,以便提供号码的不仅仅是视觉的描述, 但也提供一个有用的 KPI. 例如, 如果停滞不前的百分比"" AFE 的是 > 10% 然后显示它红, 否则显示它在黑. 使用 <xsl:选择> 要做到这一点.
其他资源:
- 确定的内部名称 (和其他很好的信息) 为列表中的数据: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!134.entry
- 显示由 SharePoint 提供的所有数据 (原始的 XML): http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!190.entry
- 获取某个特定列的 XPATH 表达式: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!155.entry
- 使用 OWA 的另一种方法(?). 我不挖进去, 但看起来有前途, 特别是对于饼图: http://www.waka.dk/Blog/PermaLink,guid,e2532e71-d774-4ac9-8f25-883964b830f4.aspx
快乐转型!
<结束 />
此页几乎完成了我一直在寻找的任务.
我有一群想要使用 SharePoint 调查列表中创建一个每周的调查. 渔获? 他们不想看到的代码… 或更改的系统,每次他们发送投票 (为每周的更新计划).
我是能够连接到调查列表和在第一次的答案列上创建关系图. 虽然我不能预测是的值和标签,他们将需要向前移动. 使事情更糟的是他们可能会有更多或更少答案可用每周.
我会看其他地方,以防万一, 但任何人都发现一个方法来创建行和基于数量的可用的选项和动态地设置这些,而不是预期的值进行硬编码的标签?
感谢保罗. 很有帮助. 谢谢你对你的工作, 我是能够将图形栏列添加到现有的 DVWP (例如:. 为任务) 很轻易地就几行代码.
在 SharePoint 设计器中, 插入数据视图的标题和 % 完成从任务列表中的列. 我把光标放在一个单元格并单击鼠标右键. 我选择插入一列向右. 在代码视图中, 我找到了 <运输署> 和被取代 <xsl:您的代码的单元格内的文本元素:
<表 cellpadding ="0" 格 ="0" 边境 ="0"
宽度 ="{一轮(@PercentComplete * 100)+1}%">
<tr 风格 ="背景颜色:红色">
<xsl:文本禁用输出转义 ="yes"><![CDATA[&n b s p;]]></xsl:文本>
</tr>
</表>
注意我改变行颜色代码从背景色 ="红" 风格 ="背景颜色:红色"
还, 能够在我的列表中选择一列 (@PercentComplete) 在"$BarPercent 位置"
格雷格 ·
另一种方法 (使用仅 SharePoint 用户界面):
http://pathtosharepoint.wordpress.com/2008/09/02/a-progress-bar-for-your-tasks-list/
http://pathtosharepoint.wordpress.com/2008/10/21/progress-bar-color-coding/
xmlns:__designer =http://schemas.microsoft.com/WebParts/v2/DataView/designer xmlns:asp ="http://schemas.microsoft.com/ASPNET/20">
选择 ="计数(/dsQueryResponse/行/列[正常化空间(@Status)= 'WIP'])" />
http://www.microsoft.com/sharepoint/downloads/components/detail.asp?a1=701伊恩 · 莫里斯张贴这在五月 2006. 我试着在 MOSS 中 2007 而且很好. 添加到 gac 中, 对 execadmsvcjobs 和 iisreset…
好帖子, 谢谢你!
好帖子, 谢谢你!
嗨保罗!
好的工作! 我也想到了这样的方式以图形方式查看SharePoint列表😉
我有一个“在SharePoint中使用仪表板’ 问题. 我们是一家军用医院,其内部网使用MOSS标准,并希望为我们的指挥组建立一个仪表板,以查看“实时’ 如果可能的话. 要点之一查看实时当前的工作负荷在设施内和从字面上看它向上和向下改变 (可能需要单击 “刷新”/F5).
先谢谢你了,
你可以做一些有用的 jQuery 来实现这种效果. 我在发电子邮件 galvin.paul@gmail.com 我会很高兴,试图给一只手.