在 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".
  • 通過創建工程,深化 <a 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:與參數 名稱="BarDisplayLabel" 請選擇="' 建議 '"/> <xsl:與參數 名稱="BarPercent" 請選擇="$percentProposed"/> <xsl:與參數 名稱="QueryFilterFieldName" 請選擇="狀態"/> <xsl:與參數 名稱="QueryFilterFieldValue" 請選擇="' 建議 '"/> <xsl:與參數 名稱="TotalItems" 請選擇="$totalProposed"></xsl:與參數> </xsl:調用範本> <xsl:調用範本 名稱="ShowBar"> <xsl:與參數 名稱="BarDisplayLabel" 請選擇="停滯"/> <xsl:與參數 名稱="BarPercent" 請選擇="$percentStalled"/> <xsl:與參數 名稱="QueryFilterFieldName" 請選擇="狀態"/> <xsl:與參數 名稱="QueryFilterFieldValue" 請選擇="停滯"/> <xsl:與參數 名稱="TotalItems" 請選擇="$totalStalled"></xsl:與參數> </xsl:調用範本> <xsl:調用範本 名稱="ShowBar"> <xsl:與參數 名稱="BarDisplayLabel" 請選擇="' 在過程'"/> <xsl:與參數 名稱="BarPercent" 請選擇="$percentInProcess"/> <xsl:與參數 名稱="QueryFilterFieldName" 請選擇="狀態"/> <xsl:與參數 名稱="QueryFilterFieldValue" 請選擇="' 在過程'"/> <xsl:與參數 名稱="TotalItems" 請選擇="$totalInProcess"></xsl:與參數> </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:與參數 名稱="%" 請選擇="$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. 克裡斯 B

    此頁幾乎完成了我一直在尋找的任務.

    我有一個想要使用 SharePoint 調查清單來創建每週投票團體. 漁獲? 他們不想看到的代碼… 或更改系統,每次他們發送輪詢 (每週的更新計畫).

    我是能夠連接到調查清單和在答案的第一列上創建關係圖. 雖然我無法預測的值和標籤,他們將需要向前移動. 為了使事情更糟糕的是他們可能會有更多或更少答案可用每週.

    會在其他地方只是以防萬一, 但任何人都已經找到了一個方法來創建行和標籤基於可用的選項和動態地設置這些設置,而不是硬式編碼預期值的數目?

    答覆
  2. Greg 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;
    更正了之後, 它就像魅力! 我將現在適應這我自己清單和狀態但肯定難不到. (我將發佈結果)
    再次感謝
    ~ Wolle
    答覆
  4. 沒有名稱
    問題 –
    如果在我圖, 我想要一個變數來不只是計算一個狀態但計算多個?
    所以, 例如要是我有了 —
    <xsl:變數名稱 ="RequestsInitialized"
    選擇 ="計數(/dsQueryResponse/行/列[正常化空間(@Status)= 'WIP'])" />
    –件事就是, 我想要計數的 'WIP' 實例, 但我還想指望別的東西像待定此變數。. 怎麼會這樣?
    謝謝!
    答覆
  5. 莫爾斯裡蘭格姆
    嗨保羅,
    我是真的,這可真是你作出巨大的努力. 可以請你解釋一下,我發佈此代碼嗎. 我用四個新檔創建了 prjoect. 然後可以你更多詳細解釋什麼該怎麼辦.
    謝謝
    莫爾
    答覆
  6. 安德魯卡林頓
    你好, 我想修改這個略有讓它對使用者資訊的工作清單中顯示的任務圖. 它使用一個名為 @AssignedTo,是一個使用者存在列列. 可以讓它顯示呈現的 HTML,但不能讓它計算並顯示值.
    任何的想法?
    謝謝
    安迪
    答覆
  7. Patrik 路凱寫道::
    嗨保羅,
    好帖子!
    一個問題:
    我想要在同一時間對兩個欄位進行篩選: 如何做到這一點?
    舉個例子, 你的變數之一被稱為 totalStalled,它在 @Status 上進行篩選.
    我想要篩選在同一時間,減少我對另一個欄位的返回記錄的數目.
    已經找到了如何使 'OR', 但我不要設法找到 ' 和’
    ' 或’ 可以像這樣實現:
    <xsl:變數名稱 ="totalStalled" 選擇 ="計數(/dsQueryResponse/行/列[正常化空間(@Status) = 停滯] | /dsQueryResponse/行/列[正常化空間(@ExtraFilterField) = 值])" />
    答覆
  8. 弗蘭克

    我有一個“在 SharePoint 中使用儀表板”’ 問題. 我們是一家軍隊醫院,使用 MOSS 標準作為我們的內聯網,並希望為我們的指揮組構建一個儀表板,以查看“實時”’ 如果可能的話. 要點之一查看當前即時在設施內的工作負荷和字面上看它更改向上和向下 (可能需要按一下 “刷新”/F5).

    謝謝你在前進,

    答覆

留言

您的電子郵件地址不會被公開. 必需的地方已做標記 *