概述:
(更新 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
快乐转型!
<结束 />