ภาพรวม:
(โปรแกรมปรับปรุง 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
เปลี่ยนความสุข!
<สิ้นสุด />