ภาพรวม:
(โปรแกรมปรับปรุง 12/04/07: เพิ่มทรัพยากรอื่นที่น่าสนใจที่สุดที่เชื่อมโยงกับบล็อกอื่นที่อยู่นี้ผ่านทาง web part น่าสนใจมาก)
รายการบล็อกนี้อธิบายถึงวิธีการสร้างกราฟแท่งใน SharePoint. ใช้งานในสภาพแวดล้อม WSS และมอสส์เป็นมันเพียงขึ้นอยู่กับ web part มุมมองข้อมูล.
แนวทางโดยรวมจะเป็นดังนี้:
- สร้างรายการ หรือไลบรารีเอกสารที่ประกอบด้วยข้อมูลที่คุณต้องการกราฟ.
- วางไลบรารีเอกสารที่เกี่ยวข้อง / แบบกำหนดเองรายการลงบนหน้า และแปลง web part สำหรับมุมมองข้อมูล (DVWP).
- แก้ไข XSL ของ DVWP เพื่อสร้าง HTML ที่แสดงเป็นกราฟ.
สถานการณ์ของธุรกิจ / การตั้งค่า:
ฉันสร้างรายการกำหนดเอง มีคอลัมน์ชื่อมาตรฐานและคอลัมน์หนึ่งเพิ่มเติม, "สถานะ". รุ่นนี้ (simplistically มาก) อนุญาต"สำหรับค่าใช้จ่าย" สถานการณ์สมมติที่ชื่อแทนโครงการและสถานะค่าจากรายการ:
- การนำเสนอ
- ในกระบวนการ
- หยุดการทำงาน
วัตถุประสงค์คือการ ผลิตเป็นแบบแนวนอนกราฟแท่งที่แสดงรหัสสถานะนี้.
ผมได้รวบรวมรายชื่อ และลักษณะเช่นนี้:
สร้าง Web Part มุมมองข้อมูล:
สร้าง DVWP โดยการเพิ่มรายการที่กำหนดเองเพ (หน้าเว็บไซต์ในกรณีของฉัน) ทำตามคำแนะนำ ที่นี่ (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!395.entry).
นอกจากเพียงแค่สร้างการ DVWP, เรายังจำเป็นต้องตั้งค่าคุณสมบัติแบ่งหน้าเพื่อแสดงแถวที่ว่าง. สำหรับฉัน, นี้ดูเหมือน:
ณ จุดนี้, ฉันปิดเสมอ SPD และเบราว์เซอร์. ฉันแล้วเปิดใหม่หน้าใช้เบราว์เซอร์. นี้หลีกเลี่ยงโดยไม่ตั้งใจ mucking ค่าโครงร่างส่วนเว็บหน้า.
แก้ไข XSLT:
ถึงตอนนี้เวลาแก้ไข XSLT.
จะทำสตูดิโอภาพนี้. (ดู ที่นี่ สำหรับบันทึกสำคัญเกี่ยวกับ intellisense ที่จะช่วยคุณได้เยอะ).
ฉันสร้างโครงการที่มีว่างเพิ่มแฟ้มใหม่ 4 (แทนคำว่า "ต้นฉบับ" และ "ใหม่" ตามความเหมาะสม):
- Original.xslt
- New.xslt
- Params.xml เดิม
- Params.xml ใหม่
ในกรณีของฉัน, โดยมีลักษณะดังนี้:
ปรับเปลี่ยน web part และคัดลอก params และ XSL ต้นฉบับ"" รุ่นใน Visual Studio.
วัตถุประสงค์ที่นี่คือทำ XSL ที่จะแปลงผลลัพธ์ที่เราได้รับกลับจากแบบสอบถาม DVWP ใน HTML ที่ทำเป็นกราฟ.
เพื่อการนี้, ช่วยพิจารณาก่อน ว่า HTML ควรเหมือนก่อนเราปะปน โดยจับที่เรียกว่า "XSL". (ให้ชัดเจน, ต่อไปนี้เป็นเพียงตัวอย่าง; ไม่พิมพ์ หรือคัดลอก/วางลงในห้องภาพ. ฉันให้เป่าเต็มที่จุดเริ่มต้นที่ต่อไปในข้อ). กราฟตัวอย่างต่อไปนี้ถูกแสดงตาม HTML ต่อไปนี้ทันที:
HTML ที่สอดคล้องกัน:
<html> <เนื้อความ> <ศูนย์> <ตารางความกว้าง = 80%> <tr><td><ศูนย์>กราฟแท่งแนวนอน</td></tr> <tr> <การจัดตำแหน่ง td = "ศูนย์"> <เส้นขอบตาราง = "1" ความกว้าง = 80%> <tr> <ความกว้างของ td = 10%>เปิด</td> <td><ตาราง cellpadding ="0" cellspacing ="0" เส้นขอบความกว้าง 0 = = 50%><tr bgcolor =สีแดง><td> </td></tr></ตาราง></td> </tr> <tr> <ความกว้างของ td = 10%>ปิด</td> <td><ตาราง cellpadding ="0" cellspacing ="0" เส้นขอบความกว้าง 0 = = 25%><tr bgcolor =สีแดง><td> </td></tr></ตาราง></td> </tr> <tr> <ความกว้างของ td = 10%>หยุดการทำงาน</td> <td><ตาราง cellpadding ="0" cellspacing ="0" เส้นขอบความกว้าง 0 = = 25%><tr bgcolor =สีแดง><td> </td></tr></ตาราง></td> </tr> </ตาราง> </td> </tr> </ตาราง> </เนื้อความ> </html> |
ใช้วิธีการแบบง่ายตายเพื่อสร้างบาร์ของฉันโดยการกำหนดสีของแถวที่จะ "แดง".
ที่นี่จัดเป็น: ในสุด, ทั้งหมดที่เราทำคือการสร้าง HTML ด้วยแถวและคอลัมน์.
เท็มเพลต XSLT:
ฉันได้คัดลอก XSLT ที่สร้างกราฟแท่งแนวนอน. ก็ค่อนข้างดีความเห็นเพื่อที่จะไม่เพิ่มมากที่นี่ยกเว้นบันทึกย่อเหล่านี้:
- ผมเริ่ม ด้วย XSL ที่ SharePoint Designer ให้ผมเมื่อแรกสร้าง DVWP เริ่มต้น.
- ผมสามารถที่จะตัดนี้ลงจากของ 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" นำหน้าผลยกเว้น="อาร์เอส z o s ddwrt dt msxsl" |
ผลลัพธ์:
XSL จากข้างต้นสร้างกราฟนี้:
ลึกข้อมูลต้นแบบ โดยการคลิกที่รหัสสถานะ:
สรุปความคิด:
สามารถนี้สามารถตั้งค่าทั่วไป?
ชอบแนวคิดนี้สร้างกราฟ, แต่ผมเกลียดความจริงที่ต้องไป และไม่มากมือรหัส. ฉันได้รับเพียงเล็กน้อยคิดไปว่ามันสามารถจะตั้งค่าทั่วไป และผมในเชิงบวก, แต่ฉันยังกลัวเล็กน้อยอาจมีกำแพงอิฐอยู่ตามเส้นทางที่จะไม่มีการทำงานรอบ. ถ้าใครมีความคิดที่ดีบางอย่างนี้, โปรดสังเกตในข้อคิดเห็น หรือ อีเมล์ผม.
กราฟแนวตั้ง:
เป็นกราฟแท่งแนวนอน. แน่นอนสามารถสร้างกราฟแนวตั้ง. เราก็ต้องเปลี่ยน HTML. ฉันจะเริ่มต้นแบบเดียวกัน: สร้างการแสดง HTML ของกราฟแท่งแนวตั้ง และทราบวิธีการได้รับที่ผ่าน XSL. ถ้าใครสนใจที่, ฉันไม่สามารถเกลี้ยกล่อมให้ลอง และออกกิจกรรม. ถ้าคนทำที่, โปรดแจ้งให้เราทราบและฉันยินดีจะเชื่อมโยงไปยังบล็อกของคุณ🙂
ผมคิดว่า ท้าทายกับกราฟแนวตั้งเป็นว่า ป้ายชื่อสำหรับกราฟจะยากในการจัดการ, แต่แน่นอนไม่ได้.
ฟิลด์ชื่อ Gotcha:
มีสิ่งหนึ่งเพื่อออกค้นหา ด้วยชื่อของเขตข้อมูล.
แรก, ชื่อเขตข้อมูล มีช่องว่างเป็นต้องหนีใน 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
เปลี่ยนความสุข!
<สิ้นสุด />
หน้านี้เกือบเสร็จสมบูรณ์แล้วงานที่ฉันถูกมองหา.
มีกลุ่มที่ต้องการใช้รายการ SharePoint แบบสำรวจการสร้างแบบสำรวจเป็นรายสัปดาห์. จับ? พวกเขาไม่ต้องการดูรหัส… หรือเปลี่ยนระบบทุกครั้งที่พวกเขาส่งแบบสำรวจ (วางแผนปรับปรุงประจำสัปดาห์).
ผมสามารถที่จะเชื่อมต่อนี้รายการแบบสำรวจ และสร้างกราฟในคอลัมน์แรกที่ตอบ. สิ่งที่ฉันไม่สามารถทำนายว่า มีค่าและป้ายชื่อที่พวกเขาจะต้องก้าวไปข้างหน้า. เพื่อให้เรื่อง แย่ลงจะได้น้อยมีคำตอบแต่ละสัปดาห์.
ฉันจะค้นหาอื่น ๆ ในกรณี, แต่มีคนพบวิธีที่จะสร้างแถวและป้ายชื่อตามออกจำนวนชัน และแบบไดนามิกการตั้งค่าเหล่านี้ แทนยากรหัสค่าที่คาดไว้?
ขอบคุณพอล. เป็นประโยชน์มาก. ขอบคุณการทำงานของคุณ, ผมสามารถเพิ่มกราฟแถบคอลัมน์ DVWP อยู่ (เช่น. สำหรับงาน) มีเพียงไม่กี่บรรทัดของรหัสของคุณได้อย่างง่ายดายมาก.
ใน SharePoint Designer, แทรกมุมมองข้อมูล ด้วยชื่อเรื่อง และ % คอลัมน์ทั้งหมดจากรายการงาน. ฉันวางเคอร์เซอร์ในเซลล์ใดเซลล์หนึ่ง และคลิกขวา. ผมเลือกแทรกคอลัมน์ทางด้านขวา. ในมุมมองโค้ด, พบ <td> และแทน <xsl:องค์ประกอบข้อความข้างในเซลล์มีรหัสของคุณ:
<ตาราง cellpadding ="0" cellspacing ="0" ขอบ ="0"
ความกว้าง = "{ปัดเศษ(@PercentComplete * 100)+1}%">
<ลักษณะ tr = "สีพื้นหลัง:สีแดง">
<xsl:ข้อความที่ปิดการใช้งานผลผลิตหนี = "ใช่"><![CDATA[ ]]></xsl:ข้อความ>
</tr>
</ตาราง>
หมายเหตุเปลี่ยนรหัสสีแถวจาก bgcolor = "สีแดง" ลักษณะ = "สีพื้นหลัง:สีแดง"
นอกจากนี้, สามารถเลือกคอลัมน์ใดคอลัมน์หนึ่งในรายการของฉัน (@PercentComplete) แทน "$BarPercent"
กา
วิธีการอื่น (ใช้ UI SharePoint เท่านั้น):
http://pathtosharepoint.wordpress.com/2008/09/02/a-progress-bar-for-your-tasks-list/
http://pathtosharepoint.wordpress.com/2008/10/21/progress-bar-color-coding/
xmlns:__designer =http://schemas.microsoft.com/WebParts/v2/DataView/designer xmlns:asp ="http://schemas.microsoft.com/ASPNET/20">
เลือก = "จำนวน(/dsQueryResponse/แถว/แถว[พื้นที่ปกติ(@Status)= 'WIP'])" />
http://www.microsoft.com/sharepoint/downloads/components/detail.asp?a1=701เอียนโพสต์นี้ Morrish พฤษภาคม 2006. ฉันพยายามในมอสส์ 2007 และทำงานได้ดี. ที่เพิ่มเข้ามา GAC, มี execadmsvcjobs การ iisreset…
การลงรายการบัญชียอดเยี่ยม, ขอขอบคุณ!
การลงรายการบัญชียอดเยี่ยม, ขอขอบคุณ!
Hi Paul!
ทำงานดี! ฉันยังมีบางสิ่งบางอย่างเช่นนี้ในใจของฉันเพื่อดูรายการ SharePoint ในทางกราฟิก😉
ฉันมี ‘การใช้แผงควบคุมใน SharePoint’ คำถาม. เราเป็นโรงพยาบาลทหารโดยใช้มาตรฐาน MOSS สำหรับอินทราเน็ตของเราและต้องการที่จะสร้างแดชบอร์ดสำหรับกลุ่มคำสั่งของเราเพื่อดู ‘เวลาจริง’ ถ้าเป็นไปได้. ประเด็นหลักคือดูปริมาณปัจจุบันแบบเรียลไทม์ภายในให้ และดูมันเปลี่ยนแปลงขึ้นลงอย่างแท้จริง (อาจต้องคลิก “รีเฟรช”/F5).
ขอบคุณล่วงหน้า,
คุณสามารถทำสิ่งที่เป็นประโยชน์กับ jQuery ในการบรรลุผลนี้. อีเมลล์ galvin.paul@gmail.com และจะมีความสุข และพยายามให้มือ.