在 SharePoint 中创建条形图

概述:

(更新 12/04/07: 另一个有意思的资源结尾处加上链接地址这通过一个非常有趣的 web 部件的另一个博客)

此博客条目描述了如何在 SharePoint 中创建条形图. 这在 WSS 和苔藓的环境中工作,因为它只取决于数据视图 web 部件.

总体方法是,如下所示:

  1. 创建列表或文档库,其中包含您想要绘制的图形的数据.
  2. 关联的文档库的地方 / 自定义列表拖到页上并将其转换为一个数据视图 web 部件 (DVWP).
  3. 修改 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" 
xmlns:msxsl="瓮:架构-微软-com:xslt" xmlns:xsl="http://www.w3.org/ 1999/XSL/变换"
xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer"
xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime"
xmlns:o="瓮:架构-微软-com:办公室" xmlns:s="uuid:BDC6E3F0-6DA3-11d1-A2A3-00AA00C14882"
xmlns:dt="uuid:C2F41010-65B3-11 d 1-A29F-00AA00C14882" xmlns:rs="瓮:架构-微软-com:行集" xmlns:z="#RowsetSchema"
xmlns:ddwrt2="瓮:frontpage:内部"
> <xsl:输出 方法="html" 缩进="没有" /> <xsl:十进制格式 ="" /> <xsl:param 名称="ListUrlDir"></xsl:param> <!-- 我需要这个支持向下钻取. --> <xsl:模板 匹配="/" xmlns:SharePoint="Microsoft.SharePoint.WebControls"
xmlns:__designer=http://schemas.microsoft.com/WebParts/v2/DataView/designer xmlns:asp="http://schemas.microsoft.com/ASPNET/20"
> <xsl:变量 名称="dvt_StyleName"></xsl:变量> <xsl:变量 名称="" 请选择="/dsQueryResponse/行/列" /> <xsl:变量 名称="dvt_RowCount" 请选择="计数($行)" /> <xsl:变量 名称="空空如也" 请选择="$dvt_RowCount = 0" /> <xsl:变量 名称="dvt_IsEmpty" 请选择="$dvt_RowCount = 0" /> <xsl:选择> <xsl:当 测试="$dvt_IsEmpty"> 没有数据关系图!<br/> </xsl:当> <xsl:否则> <!-- 有趣的东西从这里开始. 我们需要在关系图中定义一对变量的每一行: 总项目数和合计百分比. --> <xsl:变量 名称="totalProposed" 请选择="计数(/dsQueryResponse/行/列[正常化空间(@Status) = '建议'])" /> <xsl:变量 名称="percentProposed" 请选择="$totalProposed $dvt_RowCount div" /> <xsl:变量 名称="totalInProcess" 请选择="计数(/dsQueryResponse/行/列[正常化空间(@Status) '中' =])" /> <xsl:变量 名称="percentInProcess" 请选择="$totalInProcess $dvt_RowCount div" /> <xsl:变量 名称="totalStalled" 请选择="计数(/dsQueryResponse/行/列[正常化空间(@Status) = 停滞])" /> <xsl:变量 名称="percentStalled" 请选择="$totalStalled $dvt_RowCount div" /> <!-- 我们定义我们的 HTML 表在这里. 我借用一些标准 SharePoint 样式在这里使它保持一致. 我认为它将荣誉对全球的 css 文件的更改,以及主题将重写. --> < 宽度="100%" ="0" ="2" 样式="右边框: 1 固体 #C0C0C0; 下边框: 1 固体 #C0C0C0; 边框式左: 固体; 边框左边宽度: 1; 边框式顶部: 固体; 边框顶部宽度: 1;"> <tr> <运输署 对齐="中心"> < 边框="1" 宽度="100%"> <!-- 我们想要图的每个状态, 我们称之为"ShowBar" 模板. 我们将它传递: 1. 行标签. 这被转化为超链接. 2. 百分比 (上面的变量). 3. 实际的字段名称的基础列表中的代码. 这不需要匹配显示标签. 4. 为匹配的字段值 #3. 5. 此状态代码的总计项 (不总计的所有状态代码). 它会发出 <tr></tr> 和水平条形图线. 我们为我们想要查看每个状态代码调用此模板. --> <xsl:调用模板 名称="ShowBar"> <xsl:与 param 名称="BarDisplayLabel" 请选择="' 建议 '"/> <xsl:与 param 名称="BarPercent" 请选择="$percentProposed"/> <xsl:与 param 名称="QueryFilterFieldName" 请选择="状态"/> <xsl:与 param 名称="QueryFilterFieldValue" 请选择="' 建议 '"/> <xsl:与 param 名称="TotalItems" 请选择="$totalProposed"></xsl:与 param> </xsl:调用模板> <xsl:调用模板 名称="ShowBar"> <xsl:与 param 名称="BarDisplayLabel" 请选择="停滞"/> <xsl:与 param 名称="BarPercent" 请选择="$percentStalled"/> <xsl:与 param 名称="QueryFilterFieldName" 请选择="状态"/> <xsl:与 param 名称="QueryFilterFieldValue" 请选择="停滞"/> <xsl:与 param 名称="TotalItems" 请选择="$totalStalled"></xsl:与 param> </xsl:调用模板> <xsl:调用模板 名称="ShowBar"> <xsl:与 param 名称="BarDisplayLabel" 请选择="' 在过程'"/> <xsl:与 param 名称="BarPercent" 请选择="$percentInProcess"/> <xsl:与 param 名称="QueryFilterFieldName" 请选择="状态"/> <xsl:与 param 名称="QueryFilterFieldValue" 请选择="' 在过程'"/> <xsl:与 param 名称="TotalItems" 请选择="$totalInProcess"></xsl:与 param> </xsl:调用模板> </> </运输署> </tr> </> </xsl:否则> </xsl:选择> </xsl:模板> <!-- 此模板并在条形图中显示单个行的工作. 你可能会做大部分的你在这里调整. --> <xsl:模板 名称="ShowBar"> <xsl:param 名称="BarDisplayLabel" /> <!-- 要显示标签 --> <xsl:param 名称="BarPercent"/> <!-- 合计百分比. --> <xsl:param 名称="QueryFilterFieldName"/> <!-- 用于跳转到查询 & 筛选器 --> <xsl:param 名称="QueryFilterFieldValue"/> <!-- 用于跳转到查询 & 筛选器 --> <xsl:param 名称="TotalItems" /> <!-- 这个 barlabel 的总计数 --> <tr> <!-- 栏标签本身. --> <运输署 ="ms formbody" 宽度="30%"> <!-- 这下一组语句生成一个查询字符串,允许我们深入到基础数据的筛选视图. 我们做的几件事情在这里使用: 1. 我们可以将 FilterField1 和 FilterValue1 传递给要筛选的列的列表. 2. SharePoint 将关键的参数传递给我们, ListUrlDir 指出,对此 DVWP 为"正在运行"的基础列表. 不是 XSL 好玩? --> <xsl:文本 禁用输出转义=""> <![CDATA[<href ="]]></xsl:文本> <xsl:值的 请选择="$ListUrlDir"/> <xsl:文本 禁用输出转义=""><![CDATA[?FilterField1 =]]></xsl:文本> <xsl:值的 请选择="$QueryFilterFieldName"/> <xsl:文本 禁用输出转义=""><![CDATA[&FilterValue1 =]]></xsl:文本> <xsl:值的 请选择="$QueryFilterFieldValue"/> <xsl:文本 禁用输出转义=""><![CDATA[">]]></xsl:文本> <xsl:值的 请选择="$BarDisplayLabel"/> <xsl:文本 禁用输出转义=""><![CDATA[</一>]]></xsl:文本> <!-- 下一位显示一些数字的格式: "(总计 / % 总数的)" --> (<xsl:值的 请选择="$TotalItems"/> / <!-- 这为我们创造一个好的百分比标签. 谢谢, 微软! --> <xsl:调用模板 名称="percentformat"> <xsl:与 param 名称="%" 请选择="$BarPercent"/> </xsl:调用模板>) </运输署> <!-- 最后, 发出 <运输署> 标签栏本身.--> <运输署> < ="0" ="0" 边框="0" 宽度="{一轮($BarPercent * 100)+1}%"> <tr 背景色="红色"> <xsl:文本 禁用输出转义=""><![CDATA[&n b s p;]]></xsl:文本> </tr> </> </运输署> </tr> </xsl:模板> <!-- 这是直接取自我在 MS 模板中找到一些 XSL. --> <xsl:模板 名称="percentformat"> <xsl:param 名称="%"/> <xsl:选择> <xsl:当 测试="数字格式($%, '#,##0%;-#,##0%')= '南'">0%</xsl:当> <xsl:否则> <xsl:值的 请选择="数字格式($%, '#,##0%;-#,##0%')" /> </xsl:否则> </xsl:选择> </xsl:模板> </xsl:样式表>

结果:

从上面的 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:选择> 要做到这一点.

其他资源:

快乐转型!

<结束 />

订阅我的博客!

17 上“的想法在 SharePoint 中创建条形图

  1. Chris B

    此页几乎完成了我一直在寻找的任务.

    我有一群想要使用 SharePoint 调查列表中创建一个每周的调查. 渔获? 他们不想看到的代码… 或更改的系统,每次他们发送投票 (为每周的更新计划).

    我是能够连接到调查列表和在第一次的答案列上创建关系图. 虽然我不能预测是的值和标签,他们将需要向前移动. 使事情更糟的是他们可能会有更多或更少答案可用每周.

    我会看其他地方,以防万一, 但任何人都发现一个方法来创建行和基于数量的可用的选项和动态地设置这些,而不是预期的值进行硬编码的标签?

    答复
  2. 格雷格 Laushine

    感谢保罗. 很有帮助. 谢谢你对你的工作, 我是能够将图形栏列添加到现有的 DVWP (例如:. 为任务) 很轻易地就几行代码.
    在 SharePoint 设计器中, 插入数据视图的标题和 % 完成从任务列表中的列. 我把光标放在一个单元格并单击鼠标右键. 我选择插入一列向右. 在代码视图中, 我找到了 <运输署> 和被取代 <xsl:您的代码的单元格内的文本元素:
    <表 cellpadding ="0" 格 ="0" 边境 ="0"
    宽度 ="{一轮(@PercentComplete * 100)+1}%">
    <tr 风格 ="背景颜色:红色">
    <xsl:文本禁用输出转义 ="yes"><![CDATA[&n b s p;]]></xsl:文本>
    </tr>
    </表>

    注意我改变行颜色代码从背景色 ="红" 风格 ="背景颜色:红色"
    还, 能够在我的列表中选择一列 (@PercentComplete) 在"$BarPercent 位置"
    格雷格 ·

    答复
  3. 沃尔夫冈 ·
    保罗, 感谢这! 我创建一个精确的副本,你做了什么和它的作品几乎就是完美. 行第 2 款的您的代码中还有一个小问题:
    <xsl:模板匹配 ="/" xmlns:SharePoint="Microsoft.SharePoint.WebControls"
    xmlns:__designer =http://schemas.microsoft.com/WebParts/v2/DataView/designer xmlns:asp ="http://schemas.microsoft.com/ASPNET/20"&gt;
    更正了之后, 它工作像魅力! 我现在将适应这于我自己的列表和状态,但我敢肯定它不会到很难. (我将发布结果)
    再次感谢
    ~ 郁
    答复
  4. 没有名称
    问题 –
    如果在我的图, 我想要一个变量来不只是计算一个状态但计算多个的?
    所以, 例如,如果我说 —
    <xsl:变量名称 ="RequestsInitialized"
    选择 ="计数(/dsQueryResponse/行/列[正常化空间(@Status)= 'WIP'])" />
    –的事情是, 我想要计数的 'WIP' 实例, 但我还想指望别的东西像待定此变量。. 怎么会这样?
    谢谢!
    答复
  5. 穆尔斯里兰格姆
    嗨保罗,
    我是真的,这可真是你作出巨大的努力. 你能解释一下在哪里将此代码吗. 我已经创建了四个新的文件 prjoect. 然后你能解释更详细地什么该怎么办.
    谢谢
    穆尔
    答复
  6. 安德鲁 · 卡灵顿
    你好, 我想稍微修改这使它对用户信息的任务列表中显示的任务图. 它使用一个名为 @AssignedTo 这是一个用户存在列列. 我可以用它来显示呈现的 HTML,但不能让它计算并显示值.
    任何的想法?
    谢谢
    Andy
    答复
  7. 帕特里克 · 卢卡写道::
    嗨保罗,
    好帖子!
    一个问题:
    我想要在同一时间对两个字段进行筛选: 如何做到这一点?
    例如, 你的变量之一被称为 totalStalled,它筛选,在 @Status 上.
    我想要在同一时间以减少我的号码上另一个字段的返回记录的筛选.
    已经找到了如何使 'OR', 但我不要设法找到 ' 和’
    ' 或’ 可以实现像这样:
    <xsl:变量名称 ="totalStalled" 选择 ="计数(/dsQueryResponse/行/列[正常化空间(@Status) = 停滞] | /dsQueryResponse/行/列[正常化空间(@ExtraFilterField) = 值])" />
    答复
  8. 弗兰克

    我有一个“在SharePoint中使用仪表板’ 问题. 我们是一家军用医院,其内部网使用MOSS标准,并希望为我们的指挥组建立一个仪表板,以查看“实时’ 如果可能的话. 要点之一查看实时当前的工作负荷在设施内和从字面上看它向上和向下改变 (可能需要单击 “刷新”/F5).

    先谢谢你了,

    答复

留言

您的电子邮件地址不会被公开. 必需的地方已做标记 *