Tổng quan:
(CẬP NHẬT 12/04/07: Thêm một nguồn tài nguyên thú vị vào cuối liên kết đến một blog địa chỉ này thông qua một phần web rất thú vị)
Blog entry này mô tả làm thế nào để tạo ra một biểu đồ thanh trong SharePoint. Điều này hoạt động trong môi trường WSS và RÊU như nó chỉ phụ thuộc vào phần web xem dữ liệu.
Cách tiếp cận tổng thể là như sau:
- Tạo một danh sách hoặc thư viện tài liệu có chứa dữ liệu bạn muốn lập đồ thị.
- Đặt thư viện tài liệu liên quan / tuỳ chỉnh danh sách vào một trang và chuyển nó đến một phần dữ liệu xem web (DVWP).
- Sửa đổi XSL của DVWP để tạo ra HTML mà thể hiện như là một đồ thị.
Kinh doanh kịch bản / Thiết lập:
Tôi đã tạo ra một danh sách tùy chỉnh với cột tiêu đề tiêu chuẩn và một cột bổ sung, "Trạng thái". Mô hình này (rất simplistically) sự "cho phép cho chi phí" kịch bản đại diện nơi tiêu đề cho dự án và vị thế một giá trị từ danh sách:
- Đề xuất
- Trong quá trình
- Bị ngừng
Mục tiêu là để sản xuất một biểu đồ thanh ngang tương tác cho thấy các mã trạng thái.
Tôi có dân cư trong danh sách và nó trông như thế này:
Tạo dữ liệu xem Web phần:
Tạo ra DVWP bằng cách thêm danh sách tùy chỉnh cho một trang (Trang web trang trong trường hợp của tôi) và thực hiện theo các hướng dẫn Ở đây (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!395.entry).
Ngoài chỉ đơn giản là việc tạo ra DVWP, chúng tôi cũng cần phải thiết lập các tài sản phân trang để hiển thị tất cả các hàng có sẵn. Đối với tôi, Điều này có vẻ như thế này:
Tại thời điểm này, Tôi luôn luôn đóng SPD và trình duyệt. Tôi sau đó tái mở trang bằng cách sử dụng trình duyệt. Điều này tránh vô tình mucking lên giao diện phần web trên trang.
Sửa đổi XSLT:
Nó bây giờ là thời gian để sửa đổi XSLT.
Tôi luôn luôn sử dụng visual studio cho điều này. (Xem Ở đây cho một lưu ý quan trọng về intellisense mà sẽ giúp bạn rất nhiều).
Tôi tạo ra một dự án trống thêm bốn tập tin mới (thay thế các từ "bản gốc" và "New" phù hợp):
- Original.XSLT
- New.XSLT
- Bản gốc Params.xml
- Mới Params.xml
Trong trường hợp của tôi, nó trông như thế này:
Sửa đổi phần web và sao chép chủ và XSL "bản gốc" Phiên bản trong Visual Studio.
Mục tiêu ở đây là để gây ra XSL để biến đổi kết quả mà chúng tôi nhận được trở lại từ các truy vấn DVWP vào HTML mà ám là một đồ thị.
Để kết thúc này, nó giúp đầu tiên xem xét những gì HTML nên trông giống như trước khi chúng tôi bị lẫn lộn bởi insanity được gọi là "XSL". (Để được rõ ràng, sau đây là chỉ đơn giản là một ví dụ; không gõ nó hoặc sao chép/dán vào phòng thu trực quan. Tôi cung cấp một cú đánh đầy đủ điểm khởi đầu cho rằng sau này trong ghi-up). Đồ thị mẫu sau đây trả lại theo HTML ngay lập tức sau:
HTML tương ứng:
<HTML> <cơ thể> <Trung tâm> <bàn chiều rộng = 80%> <tr><TD><Trung tâm>Biểu đồ thanh ngang</TD></tr> <tr> <TD align = "Trung tâm"> <biên giới bảng = "1" chiều rộng = 80%> <tr> <chiều rộng TD = 10%>Mở</TD> <TD><bảng cellpadding ="0" cellspacing ="0" biên giới = 0 width = 50%><tr bgcolor = đỏ><TD> </TD></tr></Bàn></TD> </tr> <tr> <chiều rộng TD = 10%>Đóng cửa</TD> <TD><bảng cellpadding ="0" cellspacing ="0" biên giới = 0 width = 25%><tr bgcolor = đỏ><TD> </TD></tr></Bàn></TD> </tr> <tr> <chiều rộng TD = 10%>Bị ngừng</TD> <TD><bảng cellpadding ="0" cellspacing ="0" biên giới = 0 width = 25%><tr bgcolor = đỏ><TD> </TD></tr></Bàn></TD> </tr> </Bàn> </TD> </tr> </Bàn> </cơ thể> </HTML> |
Tôi đã sử dụng một cách tiếp cận chết đơn giản để tạo ra quán bar của tôi bằng cách thiết lập màu nền của một hàng để "đỏ".
Take-away đây là điều này: Cuối cùng, Tất cả chúng tôi đang làm là tạo ra HTML với các hàng và cột.
Mẫu XSLT:
Tôi đã sao chép XSLT mà tạo ra một biểu đồ thanh ngang. Nó là khá tốt nhận xét vì vậy tôi sẽ không thêm nhiều ở đây ngoại trừ những ghi chú:
- Tôi bắt đầu với mặc định XSL SharePoint Designer đã cho tôi khi tôi lần đầu tiên tạo ra DVWP.
- Tôi đã có thể cắt giảm từ của SPD 657 dòng để 166 dây chuyền.
- Tôi không lộn xộn xung quanh với các tập tin XML tham số (đó là riêng biệt từ XSL và bạn sẽ biết những gì tôi có nghĩa là khi bạn đi để sửa đổi DVWP chính nó; có hai tập tin bạn có thể sửa đổi). Tuy nhiên, để đơn giản hóa nó, Tôi đã loại bỏ gần như tất cả chúng từ XSL. Điều này có nghĩa rằng nếu bạn muốn làm cho việc sử dụng những tham số, bạn chỉ cần thêm định nghĩa biến của họ trở lại vào XSL. Đó sẽ là dễ dàng kể từ khi bạn sẽ có các định nghĩa biến XSL ban đầu trong dự án phòng thu trực quan của bạn.
- Bạn nên có thể sao chép và dán này trực tiếp vào dự án phòng thu trực quan của bạn. Sau đó, loại bỏ các cuộc gọi của tôi và chèn của riêng bạn cuộc gọi đến "ShowBar".
- Khoan xuống hoạt động bằng cách tạo ra một <a href> Thích cái này: http://server/List?FilterField1=fieldname&FilterValue1=actualFilterValue. Kỹ thuật này có thể giá trị trong ngôn ngữ này. Ban đầu, Tôi nghĩ rằng tôi sẽ cần phải phù hợp với một định dạng phức tạp hơn: http://server/List/AllItems.aspx?View={guid}&FilterField1=blah&FilterValue1=blah, nhưng trong môi trường của tôi đó là không cần thiết. Danh sách URL được thông qua cho chúng tôi bởi SharePoint vì vậy đây là khá dễ dàng để khái quát.
Ở đây nó là:
<XSL:stylesheet Phiên bản="1.0" loại trừ kết quả tiền tố="RS z o s ddwrt dt msxsl" |
Kết quả:
XSL từ phía trên tạo ra biểu đồ này:
Khoan xuống đến các dữ liệu cơ bản bằng cách nhấp vào mã trạng thái:
Kết luận suy nghĩ:
Điều này có thể được tổng quát?
Tôi yêu này khái niệm đồ họa, nhưng tôi ghét thực tế là tôi phải đi và làm rất nhiều tay mã hóa. Tôi đã đưa ra một chút suy nghĩ cho dù nó có thể được tổng quát và tôi lạc quan, nhưng tôi cũng một chút sợ hãi rằng có thể có một bức tường gạch một nơi nào đó dọc theo con đường mà sẽ không cung cấp bất kỳ công việc quanh. Nếu bất cứ ai có một số ý tưởng tốt về điều này, Xin vui lòng làm cho một lưu ý trong các ý kiến hoặc gửi email cho tôi.
Đồ thị theo chiều dọc:
Đây là một biểu đồ thanh ngang. Nó là chắc chắn có thể để tạo ra một đồ thị theo chiều dọc. Chúng tôi chỉ cần thay đổi mã HTML. Tôi sẽ bắt đầu theo cùng một cách: Tạo ra một đại diện HTML của một biểu đồ thanh theo chiều dọc và sau đó tìm ra cách để có được mà qua XSL. Nếu có ai quan tâm đến việc đó, Tôi có thể được thuyết phục để thử và làm việc ra các kinks. Nếu ai đó đã thực hiện mà, xin vui lòng cho tôi biết và tôi sẽ sẵn sàng liên kết đến blog của bạn 🙂
Tôi nghĩ rằng các thách thức với một đồ thị dọc là các nhãn cho đồ thị khó khăn hơn để quản lý, nhưng chắc chắn không phải không thể.
Lĩnh vực tên Gotcha:
Có ít nhất hai điều để tìm với tên trường của bạn.
Đầu tiên, một tên trường với một không gian đã được thoát khỏi những trong XSL. Điều này có lẽ sẽ là một vấn đề ở đây:
<XSL:biến Tên="totalProposed"
chọn="Bá tước(/dsQueryResponse/hàng/hàng[bình thường hóa không gian(@Status) = 'Đề nghị'])" />
Nếu tình trạng"của bạn" cột này thực sự được đặt tên "tình trạng mã" sau đó bạn cần phải tham khảo nó như là "Status_x0020_Code":
<XSL:biến Tên="totalProposed"
chọn="Bá tước(/dsQueryResponse/hàng/hàng[bình thường hóa không gian(@Status_x0020_Code) = 'Đề nghị'])" />Thứ hai, và tôi là một chút mờ về điều này, nhưng bạn cũng cần phải cảnh báo cho lĩnh vực tên thay đổi. Nếu bạn đặt tên cho lĩnh vực của bạn "tình trạng mã" và sau đó trên, đổi tên nó thành"AFE", "tên nội bộ" không thay đổi. Tên nội bộ vẫn sẽ "tình trạng mã" và phải được tham chiếu như "Status_x0020_Code". Các "khác tài nguyên" liên kết có thể giúp chẩn đoán và sửa chữa các loại vấn đề.
Về màu:
Tôi đã chọn "đỏ" bởi vì nó là dễ chịu với tôi lúc này. Nó sẽ không là một vấn đề lớn cho các màu sắc khác nhau để cung cấp nhiều hơn chỉ là một mô tả trực quan của một số, nhưng cũng cung cấp một KPI hữu ích. Ví dụ:, Nếu tỷ lệ phần trăm của "ngừng" Của AFE là > 10% sau đó hiển thị nó màu đỏ, Nếu không hiển thị nó trong màu đen. Sử dụng <XSL:chọn> để thực hiện việc này.
Tài nguyên khác:
- Xác định tên nội bộ (và thông tin tốt) cho các dữ liệu trong một danh sách: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!134.entry
- Hiển thị tất cả các dữ liệu được cung cấp bởi SharePoint (XML nguyên): http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!190.entry
- Nhận được biểu thức XPATH của một cột cụ thể: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!155.entry
- Một cách tiếp cận sử dụng OWA(?). Tôi đã không đào vào nó, nhưng có vẻ đầy hứa hẹn, đặc biệt là cho các biểu đồ pie: http://www.waka.dk/Blog/PermaLink,guid,e2532e71-d774-4ac9-8f25-883964b830f4.aspx
Hạnh phúc chuyển đổi!
<kết thúc />