概述:
(更新 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".
- 通過創建工程,深化 <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" |
結果:
從上面的 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
快樂轉型!
<結束 />