Sekilas pandang:
(UPDATE 12/04/07: Ditambahkan lain sumber daya yang menarik pada akhir yang menghubungkan ke blog lain bahwa alamat ini melalui bagian web yang sangat menarik)
Blog entry ini menjelaskan cara membuat grafik dalam SharePoint. Ini bekerja di WSS dan MOSS lingkungan seperti itu hanya tergantung pada bagian web Lihat data.
Keseluruhan pendekatan adalah sebagai berikut:
- Membuat daftar atau dokumen perpustakaan yang berisi data yang Anda ingin membuat grafik.
- Tempat terkait dokumen Perpustakaan / kustom daftar ke halaman dan mengubahnya menjadi data tampilan web bagian (DVWP).
- Memodifikasi DVWP XSL untuk menghasilkan HTML yang menunjukkan sebagai grafik.
Bisnis skenario / Setup:
Saya telah membuat daftar kustom dengan kolom judul standar dan satu kolom tambahan, "Status". Model ini (sangat mudah) "otorisasi untuk biaya" skenario yang mana judul mewakili proyek dan Status nilai dari daftar:
- Diusulkan
- Dalam proses
- Terhenti
Tujuannya adalah untuk menghasilkan grafik batang horizontal interaktif yang menunjukkan kode status ini.
Saya telah dihuni daftar dan tampak seperti ini:
Membuat bagian Web Lihat Data:
Membuat DVWP dengan menambahkan daftar kustom ke halaman (Halaman situs dalam kasus saya) dan ikuti petunjuk Sini (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!395.entry).
Selain hanya membuat DVWP, kita juga perlu untuk mengatur properti paging untuk menunjukkan semua baris yang tersedia. Bagi saya, ini terlihat seperti ini:
Pada titik ini, Saya selalu menutup SPD dan browser. Saya kemudian kembali membuka halaman menggunakan browser. Hal ini untuk menghindari sengaja mucking tata letak bagian web di Halaman.
Memodifikasi XSLT:
Sekarang saatnya untuk mengubah XSLT.
Saya selalu menggunakan visual studio untuk ini. (Lihat Sini untuk catatan penting tentang intellisense yang akan membantu Anda banyak).
Cara membuat sebuah proyek kosong menambahkan empat file baru (mengganti kata-kata "asli" dan "New" sebagaimana mestinya):
- Original.XSLT
- New.XSLT
- Params.xml asli
- Baru Params.xml
Dalam kasus saya, tampak seperti ini:
Memodifikasi bagian web dan menyalin params dan XSL aslinya"" Versi dalam Visual Studio.
Tujuan di sini adalah untuk menyebabkan XSL untuk mengubah hasil kami kembali dari DVWP query ke HTML yang menuliskan sebagai grafik.
Untuk tujuan ini, Hal ini membantu untuk pertama-tama mempertimbangkan apa HTML akan terlihat seperti sebelum kita mendapatkan bingung dengan kegilaan yang dikenal sebagai "XSL". (Untuk menjadi jelas, Berikut ini adalah hanya sebuah contoh; jangan ketik atau copy/paste ke visual studio. Saya memberikan pukulan penuh titik awal untuk itu kemudian dalam menulis-up). Berikut contoh grafik dituliskan sesuai HTML segera setelah:
HTML yang sesuai:
|
|
<HTML>
<bodyHTMLan >>< kuat > pesan yang kuat.</strong> </body> </html> ">
<Pusat>
<Tabel lebar = 80%>
<TR><TD><Pusat>Grafik batang horizontal</TD></TR>
<TR>
<TD align = "pusat">
<Tabel perbatasan = "1" lebar = 80%>
<TR>
<lebar TD = 10%>Buka</TD>
<TD><Tabel cellpadding ="0" cellspacing ="0" perbatasan = 0 width = 50%><TR bgcolor = merah><TD> </TD></TR></Meja></TD>
</TR>
<TR>
<lebar TD = 10%>Ditutup</TD>
<TD><Tabel cellpadding ="0" cellspacing ="0" perbatasan = 0 lebar = 25%><TR bgcolor = merah><TD> </TD></TR></Meja></TD>
</TR>
<TR>
<lebar TD = 10%>Terhenti</TD>
<TD><Tabel cellpadding ="0" cellspacing ="0" perbatasan = 0 lebar = 25%><TR bgcolor = merah><TD> </TD></TR></Meja></TD>
</TR>
</Meja>
</TD>
</TR>
</Meja>
</bodyHTMLan >>< kuat > pesan yang kuat.</strong> </body> </html> ">
</HTML> |
Saya menggunakan pendekatan mati sederhana untuk menciptakan Bar saya dengan menetapkan warna latar belakang satu baris untuk "merah".
Sini dibawa pulang ini: Di ujung, Semua kita lakukan adalah membuat HTML dengan baris dan kolom.
Template XSLT:
Saya telah disalin XSLT yang menghasilkan grafik bar horisontal. Hal ini cukup baik komentar sehingga saya tidak akan menambahkan banyak di sini kecuali catatan ini:
- Saya mulai dengan default XSL yang SharePoint Designer memberi saya ketika saya pertama kali membuat DVWP.
- Saya mampu mengurangi ini dari SPD 657 garis untuk 166 garis.
- Saya tidak main-main dengan parameter XML file (yang terpisah dari XSL dan Anda akan tahu apa yang saya maksud ketika Anda pergi untuk memodifikasi DVWP sendiri; ada dua file, Anda dapat memodifikasi). Namun, untuk menyederhanakan, Apakah menghapus hampir semua dari mereka dari XSL. Ini berarti bahwa jika Anda ingin membuat menggunakan parameter-parameter, Anda hanya perlu menambahkan variabel definisi mereka kembali ke XSL. Yang akan mudah karena Anda akan memiliki definisi variabel XSL asli dalam proyek visual studio.
- Anda seharusnya mampu untuk copy dan paste ini langsung ke proyek visual studio. Kemudian, menghapus panggilan saya dan masukkan panggilan Anda sendiri untuk "ShowBar".
- Bor turun karya menciptakan <a href> Seperti ini: http://server/List?FilterField1=fieldname&FilterValue1=actualFilterValue. Teknik ini mungkin bernilai dalam konteks lain. Pada awalnya, Saya pikir saya perlu untuk menyesuaikan diri dengan format yang lebih kompleks: http://server/List/AllItems.aspx?View={guid}&FilterField1=blah&FilterValue1=blah, Tapi di lingkungan saya itu tidak diperlukan. Daftar URL dikirimkan kepada kami dengan SharePoint jadi ini cukup mudah untuk generalisasi.
Di sini adalah:
|
|
<Extensible Stylesheet Language:stylesheet Versi="1.0" pengecualian-hasilnya-awalan="RS z o s ddwrt dt msxsl"
xmlns:msxsl="guci:skema-microsoft-com:XSLT" xmlns:Extensible Stylesheet Language="http://www.w3.org/ 1999/XSL/mengubah"
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="guci:skema-microsoft-com:Kantor" xmlns:s="UUID:BDC6E3F0-6DA3-11d1-A2A3-00AA00C14882"
xmlns:DT="UUID:C2F41010-65B3 - 11d 1-A29F-00AA00C14882" xmlns:RS="guci:skema-microsoft-com:rowset" xmlns:z="#RowsetSchema"
xmlns:ddwrt2="guci:frontpage:internal">
<Extensible Stylesheet Language:output metode="HTML" indentasi="Tidak" />
<Extensible Stylesheet Language:desimal-format NaN="" />
<Extensible Stylesheet Language:Param Nama="ListUrlDir"></Extensible Stylesheet Language:Param> <!-- Saya perlu ini untuk mendukung melacak. -->
<Extensible Stylesheet Language:template pertandingan="/" xmlns:SharePoint="Microsoft.SharePoint.WebControls"
xmlns:__designer=http://schemas.microsoft.com/WebParts/v2/DataView/designer xmlns:ASP="http://schemas.microsoft.com/ASPNET/20">
<Extensible Stylesheet Language:variabel Nama="dvt_StyleName">Tabel</Extensible Stylesheet Language:variabel>
<Extensible Stylesheet Language:variabel Nama="Baris" Pilih="/dsQueryResponse/baris/baris" />
<Extensible Stylesheet Language:variabel Nama="dvt_RowCount" Pilih="Hitung($Baris)" />
<Extensible Stylesheet Language:variabel Nama="IsEmpty" Pilih="$dvt_RowCount = 0" />
<Extensible Stylesheet Language:variabel Nama="dvt_IsEmpty" Pilih="$dvt_RowCount = 0" />
<Extensible Stylesheet Language:memilih>
<Extensible Stylesheet Language:Kapan tes="$dvt_IsEmpty">
Ada tidak ada data grafik!<br/>
</Extensible Stylesheet Language:Kapan>
<Extensible Stylesheet Language:Jika tidak>
<!--
Hal menarik dimulai di sini.
Kita perlu mendefinisikan sepasang variabel untuk setiap baris dalam grafik: Jumlah total item dan persen dari total.
-->
<Extensible Stylesheet Language:variabel Nama="totalProposed" Pilih="Hitung(/dsQueryResponse/baris/baris[menormalkan-Ruang(@Status) = 'Mengusulkan'])" />
<Extensible Stylesheet Language:variabel Nama="percentProposed" Pilih="$totalProposed div $dvt_RowCount" />
<Extensible Stylesheet Language:variabel Nama="totalInProcess" Pilih="Hitung(/dsQueryResponse/baris/baris[menormalkan-Ruang(@Status) = 'Dalam proses'])" />
<Extensible Stylesheet Language:variabel Nama="percentInProcess" Pilih="$totalInProcess div $dvt_RowCount" />
<Extensible Stylesheet Language:variabel Nama="totalStalled" Pilih="Hitung(/dsQueryResponse/baris/baris[menormalkan-Ruang(@Status) = 'Macet'])" />
<Extensible Stylesheet Language:variabel Nama="percentStalled" Pilih="$totalStalled div $dvt_RowCount" />
<!--
Kita mendefinisikan tabel HTML kami di sini. Aku meminjam dari beberapa standar SharePoint gaya di sini untuk membuat konsisten. Saya pikir itu akan menghormati perubahan ke file global css serta tema mengabaikan.
-->
<Meja lebar="100%" cellspacing="0" cellpadding="2"
gaya="perbatasan-kanan: 1 #C0C0C0 padat; perbatasan-bottom: 1 #C0C0C0 padat; perbatasan-kiri-gaya: padat; Border-kiri-lebar: 1; perbatasan-atas-gaya: padat; Border-top-lebar: 1;">
<TR>
<TD menyelaraskan="Pusat">
<Meja perbatasan="1" lebar="100%">
<!--
Untuk setiap status yang kita inginkan untuk grafik, kita sebut "ShowBar" template.
Kami melewati itu:
1. Label untuk baris. Ini berubah menjadi hyperlink.
2. Persen (variabel dari atas).
3. Nama field yang sebenarnya kode dari daftar mendasari. Ini tidak perlu untuk menyesuaikan tampilan label.
4. Nilai bidang cocok untuk #3.
5. Total item dari kode status ini (tidak grand total semua kode status).
Ia memancarkan <TR></TR> dan garis horisontal grafik batang.
Kita sebut template ini untuk setiap kode status yang kita ingin lihat.
-->
<Extensible Stylesheet Language:panggilan-template Nama="ShowBar">
<Extensible Stylesheet Language:dengan param Nama="BarDisplayLabel" Pilih="'Mengusulkan'"/>
<Extensible Stylesheet Language:dengan param Nama="BarPercent" Pilih="$percentProposed"/>
<Extensible Stylesheet Language:dengan param Nama="QueryFilterFieldName" Pilih="'Status'"/>
<Extensible Stylesheet Language:dengan param Nama="QueryFilterFieldValue" Pilih="'Mengusulkan'"/>
<Extensible Stylesheet Language:dengan param Nama="TotalItems" Pilih="$totalProposed"></Extensible Stylesheet Language:dengan param>
</Extensible Stylesheet Language:panggilan-template>
<Extensible Stylesheet Language:panggilan-template Nama="ShowBar">
<Extensible Stylesheet Language:dengan param Nama="BarDisplayLabel" Pilih="'Macet'"/>
<Extensible Stylesheet Language:dengan param Nama="BarPercent" Pilih="$percentStalled"/>
<Extensible Stylesheet Language:dengan param Nama="QueryFilterFieldName" Pilih="'Status'"/>
<Extensible Stylesheet Language:dengan param Nama="QueryFilterFieldValue" Pilih="'Macet'"/>
<Extensible Stylesheet Language:dengan param Nama="TotalItems" Pilih="$totalStalled"></Extensible Stylesheet Language:dengan param>
</Extensible Stylesheet Language:panggilan-template>
<Extensible Stylesheet Language:panggilan-template Nama="ShowBar">
<Extensible Stylesheet Language:dengan param Nama="BarDisplayLabel" Pilih="'Dalam proses'"/>
<Extensible Stylesheet Language:dengan param Nama="BarPercent" Pilih="$percentInProcess"/>
<Extensible Stylesheet Language:dengan param Nama="QueryFilterFieldName" Pilih="'Status'"/>
<Extensible Stylesheet Language:dengan param Nama="QueryFilterFieldValue" Pilih="'Dalam proses'"/>
<Extensible Stylesheet Language:dengan param Nama="TotalItems" Pilih="$totalInProcess"></Extensible Stylesheet Language:dengan param>
</Extensible Stylesheet Language:panggilan-template>
</Meja>
</TD>
</TR>
</Meja>
</Extensible Stylesheet Language:Jika tidak>
</Extensible Stylesheet Language:memilih>
</Extensible Stylesheet Language:template>
<!--
Template ini melakukan pekerjaan menampilkan setiap baris dalam grafik batang.
Anda mungkin akan melakukan sebagian besar tweaker Anda di sini.
-->
<Extensible Stylesheet Language:template Nama="ShowBar">
<Extensible Stylesheet Language:Param Nama="BarDisplayLabel" /> <!-- Label menunjukkan -->
<Extensible Stylesheet Language:Param Nama="BarPercent"/> <!-- Persen dari total. -->
<Extensible Stylesheet Language:Param Nama="QueryFilterFieldName"/> <!-- Digunakan untuk melompat ke query & Filter -->
<Extensible Stylesheet Language:Param Nama="QueryFilterFieldValue"/> <!-- Digunakan untuk melompat ke query & Filter -->
<Extensible Stylesheet Language:Param Nama="TotalItems" /> <!-- Jumlah total dari barlabel ini -->
<TR>
<!-- Bar label sendiri. -->
<TD kelas="MS-formbody" lebar="30%">
<!--
Set berikutnya pernyataan membangun string kueri yang memungkinkan kita untuk melacak lebih jauh untuk pemandangan disaring data yang mendasarinya.
Kami membuat penggunaan beberapa hal di sini:
1. Kami dapat melewati FilterField1 dan FilterValue1 ke daftar untuk menyaring pada kolom.
2. SharePoint adalah melewati parameter kunci kepada kami, ListUrlDir yang menunjuk ke daftar mendasari terhadap DVWP ini "berjalan".
Tidak menyenangkan XSL?
-->
<Extensible Stylesheet Language:teks melarikan diri menonaktifkan output="Ya">
<![CDATA[<href ="]]></Extensible Stylesheet Language:teks>
<Extensible Stylesheet Language:nilai dari Pilih="$ListUrlDir"/>
<Extensible Stylesheet Language:teks melarikan diri menonaktifkan output="Ya"><![CDATA[?FilterField1 =]]></Extensible Stylesheet Language:teks>
<Extensible Stylesheet Language:nilai dari Pilih="$QueryFilterFieldName"/>
<Extensible Stylesheet Language:teks melarikan diri menonaktifkan output="Ya"><![CDATA[&FilterValue1 =]]></Extensible Stylesheet Language:teks>
<Extensible Stylesheet Language:nilai dari Pilih="$QueryFilterFieldValue"/>
<Extensible Stylesheet Language:teks melarikan diri menonaktifkan output="Ya"><![CDATA[">]]></Extensible Stylesheet Language:teks>
<Extensible Stylesheet Language:nilai dari Pilih="$BarDisplayLabel"/>
<Extensible Stylesheet Language:teks melarikan diri menonaktifkan output="Ya"><![CDATA[</a>]]></Extensible Stylesheet Language:teks>
<!-- Bit berikutnya menunjukkan beberapa angka dalam format: "(Total / % dari total)" -->
(<Extensible Stylesheet Language:nilai dari Pilih="$TotalItems"/> /
<!-- Hal ini menciptakan sebuah label persen yang bagus bagi kita. Terima kasih, Microsoft! -->
<Extensible Stylesheet Language:panggilan-template Nama="percentformat">
<Extensible Stylesheet Language:dengan param Nama="persen" Pilih="$BarPercent"/>
</Extensible Stylesheet Language:panggilan-template>)
</TD>
<!-- Akhirnya, memancarkan <TD> Tag untuk bar sendiri.-->
<TD>
<Meja cellpadding="0" cellspacing="0" perbatasan="0"
lebar="{putaran($BarPercent * 100)+1}%">
<TR bgcolor="merah">
<Extensible Stylesheet Language:teks melarikan diri menonaktifkan output="Ya"><![CDATA[ ]]></Extensible Stylesheet Language:teks>
</TR>
</Meja>
</TD>
</TR>
</Extensible Stylesheet Language:template>
<!-- Ini diambil langsung dari beberapa XSL yang saya ditemukan dalam template MS. -->
<Extensible Stylesheet Language:template Nama="percentformat">
<Extensible Stylesheet Language:Param Nama="persen"/>
<Extensible Stylesheet Language:memilih>
<Extensible Stylesheet Language:Kapan tes="format nomor($persen, '#,##0%;-#,##0%')= 'NaN'">0%</Extensible Stylesheet Language:Kapan>
<Extensible Stylesheet Language:Jika tidak>
<Extensible Stylesheet Language:nilai dari Pilih="format nomor($persen, '#,##0%;-#,##0%')" />
</Extensible Stylesheet Language:Jika tidak>
</Extensible Stylesheet Language:memilih>
</Extensible Stylesheet Language:template>
</Extensible Stylesheet Language:stylesheet>
|
Hasil:
XSL dari atas menghasilkan grafik ini:
Telusuri data yang mendasarinya dengan mengklik pada kode status:
Pikiran penutup:
Dapat menjadi umum ini?
Saya suka konsep ini grafik, tapi aku benci kenyataan bahwa saya harus pergi dan melakukan begitu banyak tangan-coding. Aku sudah memberikan sedikit pemikiran untuk Apakah itu dapat generalized dan aku optimis, tapi aku juga sedikit takut bahwa mungkin ada dinding batu bata di suatu tempat di sepanjang jalan yang tidak akan menawarkan apapun kerja-sekitar. Jika seseorang memiliki beberapa ide yang baik ini, Harap membuat catatan di komentar atau email saya.
Grafik vertikal:
Ini adalah grafik bar horisontal. Memang mungkin untuk membuat grafik vertikal. Kita hanya perlu untuk mengubah HTML. Saya akan mulai dengan cara yang sama: Membuat HTML representasi grafik bar vertikal dan kemudian mencari cara untuk mendapatkan melalui XSL. Jika ada tertarik dalam, Saya dapat dibujuk untuk mencobanya dan berolahraga di kinks. Jika seseorang telah dilakukan yang, tolong beritahu saya dan saya dengan senang hati akan link ke blog Anda 🙂
Saya berpikir bahwa tantangan dengan grafik vertikal adalah label untuk grafik lebih sulit untuk mengelola, tetapi tentu saja tidak mustahil.
Bidang nama Gotcha:
Ada setidaknya dua hal untuk melihat keluar untuk dengan nama bidang.
Pertama, nama field dengan ruang harus melarikan diri dalam XSL. Ini mungkin akan menjadi masalah di sini:
<Extensible Stylesheet Language:variabel Nama="totalProposed"
Pilih="Hitung(/dsQueryResponse/baris/baris[menormalkan-Ruang(@Status) = 'Mengusulkan'])" />
Jika "Status" kolom sebenarnya bernama "kode Status" kemudian Anda perlu referensi sebagai "Status_x0020_Code":
<Extensible Stylesheet Language:variabel Nama="totalProposed"
Pilih="Hitung(/dsQueryResponse/baris/baris[menormalkan-Ruang(@Status_x0020_Code) = 'Mengusulkan'])" />
Kedua, dan aku agak kabur ini, Tapi Anda juga harus waspada untuk perubahan nama bidang. Jika Anda nama bidang Anda "kode Status" dan kemudian pada, mengubah nama itu untuk "AFE Status", "nama internal" tidak berubah. Nama internal masih akan "kode Status" dan harus dirujuk sebagai "Status_x0020_Code". "Sumber-sumber lain" link dapat membantu mendiagnosa dan memperbaiki masalah seperti ini.
Tentang warna:
Saya memilih "merah" karena hal ini menyenangkan bagi saya pada saat. Itu tidak akan besar untuk menunjukkan warna yang berbeda untuk memberikan lebih dari sekedar gambaran visual dari sejumlah, tetapi juga menyediakan berguna KPI. Misalnya, Jika persentase "terhenti" AFE di > 10% kemudian menunjukkan merah, Jika tidak menunjukkannya hitam. Penggunaan <Extensible Stylesheet Language:memilih> untuk mencapai hal ini.
Sumber daya lainnya:
Transformasi bahagia!
<akhir />
Berlangganan ke blog saya!