Pangkalahatang-ideya ng:
(I-UPDATE 12/04/07: Idinagdag ng isa pang kawili-wiling mga mapagkukunan sa dulo nagli-link sa isa pang blog na address na ito sa pamamagitan ng isang napaka-kagiliw-giliw na bahagi ng web)
This blog entry describes how to create a bar graph in SharePoint. This works in both WSS and MOSS environments as it only depends upon the data view web part.
Ang pangkalahatang diskarte ay ang mga sumusunod:
- Lumikha ng isang listahan o dokumento library na naglalaman ng data na gusto mong i-graph.
- Ilagay ang nauugnay na library dokumento / custom na listahan sa isang pahina at i-convert ito sa isang bahagi ng data view ng web (DVWP).
- Baguhin ang DVWP ni XSL upang bumuo ng HTML na nagpapakita bilang isang graph.
Negosyo Sitwasyon / Setup:
Ako pa nakalikha ng isang pasadyang listahan sa pamantayan haligi ng Pamagat at isang karagdagang hanay, "Status". This models (napaka simplistically) an "Authorization For Expense" sitwasyon kung saan ang pamagat ay kumakatawan sa mga proyekto at ang Katayuan ng isang halaga mula sa listahan ng:
- Ipinanukalang
- Sa Proseso
- Stalled
Ang layunin ay upang makabuo ng isang interactive na pahalang bar graph na nagpapakita ang mga code ng katayuan.
Ako populated na listahan at ang mukhang ito:
Lumikha ng Data Tingnan ang Web Bahagi:
Lumikha ng DVWP pamamagitan ng pagdaragdag ng custom na listahan sa isang pahina (site pahina sa aking mga kaso) at sundin ang mga tagubilin dito (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!395.entry).
Bilang karagdagan sa paglikha lamang ang DVWP, we also need to set the paging property to show all available rows. Sa akin, ito ganito ang hitsura:
Sa puntong ito, I always close SPD and the browser. I then re-open the page using the browser. This avoids accidentally mucking up the web part layout on the page.
Baguhin ang XSLT:
Ngayon ay oras upang baguhin ang XSLT.
I always use visual studio for this. (Tingnan dito para sa isang mahalagang tala tungkol sa intellisense na makakatulong sa iyo ng maraming).
Lumikha ako ng walang laman na proyekto magdagdag ng apat na mga bagong file (replacing the words "Original" and "New" bilang naaangkop):
- Original.xslt
- New.xslt
- Orihinal na Params.xml
- Bagong Params.xml
Sa aking kaso, ito ganito ang hitsura:
Modify the web part and copy the params and XSL to the "Original" bersyon sa Visual Studio.
Ang layunin dito ay upang magdulot sa XSL upang ibahin ang anyo ang mga resulta makuha namin pabalik mula sa DVWP query sa HTML na nagpapagana ng isang graph.
Upang ito ng pagtatapos, it helps to first consider what the HTML should look like before we get confused by the insanity that is known as "XSL". (Upang maging malinaw, ang sumusunod ay lamang ng isang halimbawa; don’t type it or copy/paste into visual studio. I provide a full blow starting point for that later in the write-up). The following sample graph is rendered as per the HTML immediately following:
Kaukulang HTML:
<html> <katawan> <sentro> <talahanayan width = 80%> <tr><td><sentro>Pahalang na Bar Graph</td></tr> <tr> <td align="center"> <table border="1" width = 80%> <tr> <td width = 10%>Bukas</td> <td><talahanayan cellpadding ="0" cellspacing ="0" border = 0 width = 50%><tr bgcolor = red><td> </td></tr></talahanayan></td> </tr> <tr> <td width = 10%>Sarado</td> <td><talahanayan cellpadding ="0" cellspacing ="0" border = 0 width = 25%><tr bgcolor = red><td> </td></tr></talahanayan></td> </tr> <tr> <td width = 10%>Stalled</td> <td><talahanayan cellpadding ="0" cellspacing ="0" border = 0 width = 25%><tr bgcolor = red><td> </td></tr></talahanayan></td> </tr> </talahanayan> </td> </tr> </talahanayan> </katawan> </html> |
I used a dead simple approach to creating my bars by setting the background color of a row to "red".
Ang tumagal-layo dito ay ito: Sa katapusan, lahat kami ay paggawa ay lumilikha ng HTML na may mga hilera at mga hanay.
Template XSLT:
I’ve copied the XSLT that generates a horizontal bar graph. It’s fairly well commented so I won’t add much here except for these notes:
- Ako makapagsimula sa default na XSL SharePoint Designer ibinigay mo sa akin kapag ako unang nilikha ang DVWP.
- Ako ay magagawang upang i-cut down na ito mula sa SPD ni 657 mga linya sa 166 lines.
- Hindi ko Nagkamali sa paligid kasama ang file na XML na mga parameter (na kung saan ay hiwalay mula sa XSL at malalaman mo kung ano ang ibig sabihin ko kapag pumunta sa iyo upang baguhin ang DVWP mismo; mayroong dalawang mga file na maaari mong baguhin). Gayunman, upang gawing simple ito, I did remove nearly all of them from the XSL. This means that if you want to make use of those parameters, you just need to add their variable definitions back to the XSL. That will be easy since you will have the original XSL variable definitions in your visual studio project.
- You ought to be able to copy and paste this directly into your visual studio project. Pagkatapos, remove my calls and insert your own calls to "ShowBar".
- Ang drill down na gumagana sa pamamagitan ng paglikha ng isang <a href> ganito: http://server/List?FilterField1=fieldname&FilterValue1=actualFilterValue. This technique may be of value in other contexts. Nang una, Akala ko Gusto ko kailangan upang sumunod sa isang mas kumplikadong mga format: http://server/List/AllItems.aspx?View={guid}&FilterField1=blah&FilterValue1=blah, but in my environment that is not necessary. The List’s URL is passed to us by SharePoint so this is quite easy to generalize.
Eto:
<xsl:stylesheet salin="1.0" ibukod-resulta-prefix="rs z o s ddwrt dt msxsl" |
Ang Resulta:
Ang XSL mula sa itaas na ito ay bumubuo ng graph:
Mag-drill down sa ang kalakip na data sa pamamagitan ng pag-click sa code ng katayuan:
Concluding saloobin:
Puwede ito Maging pangkalahatan?
Gustung-gusto ko ito graphing konsepto, but I hate the fact that I have to go in and do so much hand-coding. I’ve given a little thought to whether it can be generalized and I’m optimistic, but I’m also a little fearful that there may be a brick wall somewhere along the path that won’t offer any work-around. If anyone has some good ideas on this, mangyaring gumawa ng isang nota sa mga komento o email sa akin.
Vertical Graph:
This is a horizontal bar graph. It’s certainly possible to create a vertical graph. We just need to change the HTML. I would start the same way: Create an HTML representation of a vertical bar graph and then figure out how to get that via XSL. If anyone is interested in that, I could be persuaded to try it out and work out the kinks. If someone has already done that, mangyaring ipaalam sa akin at kukunin ko na Masaya link sa iyong blog 🙂
Sa tingin ko na ang hamon sa isang vertical na graph ay ang mga label para sa mga graph ay mas mahirap na pamahalaan, ngunit tiyak na hindi imposible.
Patlang Pangalan Gotcha ni:
May mga hindi bababa sa dalawang mga bagay na dapat na antabayanan gamit ang iyong pangalan ng field.
Una, a field name with a space has to be escaped in the XSL. This will probably be an issue here:
<xsl:nagbabago pangalan="totalProposed"
piliin="bilangin(/dsQueryResponse / Mga hilera / Hilera[normalize-espasyo(@ Status) = 'Ipinanukalang'])" />
If your "Status" column is actually named "Status Code" then you need to reference it as "Status_x0020_Code":
<xsl:nagbabago pangalan="totalProposed"
piliin="bilangin(/dsQueryResponse / Mga hilera / Hilera[normalize-espasyo(@ Status_x0020_Code) = 'Ipinanukalang'])" />Pangalawa, at ako ay medyo malabo ito sa, but you also need to be on the alert for field name changes. If you name your field "Status Code" at pagkatapos ay sa ibang pagkakataon, rename it to "AFE Status", the "internal name" does not change. The internal name will still be "Status Code" and must be referenced as "Status_x0020_Code". The "other resources" mga link ay maaaring makatulong sa diagnose at maitama ang ganitong uri ng problema.
Tungkol na Kulay:
I picked "red" because it’s pleasing to me at the moment. It would not be a big deal to show different colors so as to provide more than just a visual description of a number, but to also provide a useful KPI. Halimbawa, if the percentage of "stalled" AFE ay > 10% pagkatapos ay ipakita ito pula, otherwise show it in black. Gamitin <xsl:piliin> upang makamit ito.
Iba pang mga Mapagkukunan:
- Tukuyin ang panloob na pangalan (at iba pang mahusay na impormasyon) para ang data sa isang listahan: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!134.entry
- Ipakita ang lahat ng mga data na ibinigay sa pamamagitan ng SharePoint (ang raw XML): http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!190.entry
- Kunin ang xpath na expression ng isang tiyak na hanay: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!155.entry
- Isa pang diskarte gamit ang OWA(?). I have not dug into it, pero mukhang may pag-asa, lalo na para sa mga pie chart: http://www.waka.dk/Blog/PermaLink,guid,e2532e71-d774-4ac9-8f25-883964b830f4.aspx
Maligayang pagbabago!
<katapusan />
Ang pahinang ito ay halos makumpleto ang gawain ako ay naghahanap para sa.
Mayroon akong isang grupo na gustong gamitin ang listahan ng SharePoint Survey upang lumikha ng isang lingguhang poll. Ang catch? Hindi nila nais na makita ang code… O baguhin ang sistema sa bawat oras na ipadala nila ang poll (binalak para sa isang lingguhang pag-update).
Ako ay magagawang upang ikonekta ito sa listahan ng Survey at lumikha ng graph sa unang haligi sagot. Ano Hindi ko mahuhulaan bagaman ang mga halaga at mga label na kakailanganin nila sumusulong. Upang gumawa ng mga bagay na mas masahol pa ay maaaring sila ay magkaroon ng higit pa o mas mababa magagamit sagot sa bawat linggo.
Ako ay tumingin sa ibang lugar kung sakali, ngunit sinuman ay natagpuan ng isang paraan upang lumikha ng mga hilera at mga label na batay off ng ang bilang ng mga magagamit na mga pagpipilian at pabago-bago ang mga pagtatakda sa halip na mahirap coding ang inaasahang halaga?
Salamat Paul. Tunay na kapaki-pakinabang. Salamat sa iyong trabaho, Ako ay magagawang upang magdagdag ng graph haligi bar sa isang umiiral DVWP (e.g. para sa mga gawain) napaka madali sa pamamagitan lamang ng ilang linya ng code sa iyong.
Sa SharePoint Designer, Ipinasok ko ang isang view ng data na may Pamagat at % Kumpleto na mga hanay mula sa isang listahan ng gawain. Ko bang ilagay ang cursor sa isa sa mga cell at i-right click. Piliin ko magsingit ng isang haligi sa kanan. Sa view ng code, Nakita ko ang <td> at pinalitan ang <xsl:elemento ng teksto sa loob ng mga cell gamit ang iyong code:
<talahanayan cellpadding ="0" cellspacing ="0" border ="0"
width="{isalin(@ PercentComplete * 100)+1}%">
<tr style="background-color:red">
<xsl:text disable-output-escaping="yes"><![CDATA[ ]]></xsl:teksto>
</tr>
</talahanayan>
Note I changed the row color code from bgcolor="red" to style="background-color:pula"
Din, Nagawang upang piliin ang isa sa mga haligi sa aking listahan (@ PercentComplete) in place of "$BarPercent"
Greg
Ang isa pang pamamaraan (gamit lamang ang SharePoint UI):
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">
select="count(/dsQueryResponse / Mga hilera / Hilera[normalize-espasyo(@ Status)=’WIP’])" />
http://www.microsoft.com/sharepoint/downloads/components/detail.asp?a1=701Ian Morrish nai-post na ito Mayo 2006. Sinubukan kong sa MOSS 2007 at ito ay mahusay na gumagana. Idinagdag sa GAC, Kinailangan execadmsvcjobs at iisreset…
Mahusay post, salamat!
Mahusay post, salamat!
Hi Paul!
Nice work! Din ako ay may isang bagay tulad na ito sa aking isip na tingnan ang mga listahan SharePoint sa isang graphical na paraan 😉
Mayroon akong isang 'Paggamit ng Mga Dashboard sa SharePoint’ tanong. Kami ay isang militar na ospital gamit MOSS standard para sa aming Intranet at nais na bumuo ng isang dashboard para sa aming Command Group upang makita ang 'real time’ kung posible. Ang isa sa mga pangunahing mga punto ay tinitingnan ang real-time na kasalukuyang workload sa loob ng pasilidad at literal itong panoorin baguhin pataas at pababa (Maaaring magkaroon upang i-click ang “papanariwain”/F5).
Salamat sa iyo nang maaga,
Maaari mong gawin ang isang bagay na kapaki-pakinabang na may jQuery upang makamit ito epekto. I-email sa akin sa galvin.paul @ gmail.com at ikalulugod kong upang subukan at bigyan ang isang kamay.