Overzicht:
(UPDATE 12/04/07: Een andere interessante bron toegevoegd aan het einde te koppelen aan een andere blog dat dit via een zeer interessante webonderdeel adressen)
Deze blog entry wordt beschreven hoe u een staafdiagram in SharePoint. Dit werkt in zowel WSS en MOSS omgevingen zoals het hangt alleen af van het webonderdeel voor gegevensweergave.
De algemene aanpak is als volgt:
- Maken van een lijst of documentbibliotheek die de gegevens bevat die u wilt grafiek.
- Plaats de bijbehorende documentbibliotheek / aangepaste lijst naar een pagina en het omzetten in een webonderdeel voor gegevensweergave (DVWP).
- De DVWP de XSL voor het genereren van HTML-code als een grafiek toont wijzigen.
Bedrijfsscenario / Setup:
Ik heb een aangepaste lijst met de standaard titelkolom en één extra kolom, 'Status'. Deze modellen (zeer simplistisch) "vergunning voor kosten" scenario waar de titel het project en de Status van een waarde uit de lijst met vertegenwoordigt:
- Voorgesteld
- In proces
- Vastgelopen
De doelstelling is het produceren van een interactieve horizontale staafgrafiek waarin deze statuscodes.
Ik heb de lijst gevuld en het ziet er als volgt:
Webonderdeel Gegevensweergave maken:
De DVWP door de aangepaste lijst toe te voegen aan een pagina maken (pagina van de site in mijn geval) en volg de instructies Hier (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!395.entry).
Naast de DVWP eenvoudig te maken, We moeten ook het wisselbestand instelt zodat alle beschikbare rijen. Voor mij, Dit ziet er iets als dit:
Op dit punt, Ik sluiten altijd EPD en de browser. Ik open vervolgens opnieuw de pagina met behulp van de browser. Dit voorkomt het per ongeluk mucken het web deel lay-out op de pagina.
Het XSLT-bestand wijzigen:
Het is nu tijd om het XSLT-bestand wijzigen.
Ik altijd gebruikt u visual studio hiervoor. (Zie Hier voor een belangrijke opmerking over intellisense die u een hoop helpen zal).
Ik maak een leeg project vier nieuwe bestanden toevoegen (vervangen van de woorden "origineel" en "New" in voorkomend geval):
- Original.XSLT
- New.XSLT
- Originele Params.xml
- Nieuwe Params.xml
In mijn geval, het ziet er als volgt:
Het webonderdeel wijzigen en kopiëren de params en XSL naar de origineel"" versie in Visual Studio.
Het doel hier is om te veroorzaken de XSL te transformeren de resultaten die we terug uit de query DVWP in HTML maakt als een grafiek.
Te dien einde, het helpt om eerst overwegen hoe de HTML-code eruit moet komen te zien voordat we krijgen verward door de waanzin die bekend als "XSL staat". (Om duidelijk te zijn, het volgende is gewoon een voorbeeld; niet deze typen of kopiëren/plakken in visuele studio. Ik verstrek een volledige slag vertrekpunt voor die verderop in de write-up). De volgende steekproef grafiek wordt weergegeven volgens de HTML-code direct na:
Overeenkomstige HTML:
<HTML> <lichaam> <Center> <tabel breedte = 80%> <tr><TD><Center>Horizontale staafgrafiek</TD></tr> <tr> <TD align = "center"> <tabelrand = "1" breedte = 80%> <tr> <TD breedte = 10%>Open</TD> <TD><tabel-cellpadding ="0" Cellspacing ="0" border = 0 breedte = 50%><TR bgcolor = rood><TD> </TD></tr></tabel></TD> </tr> <tr> <TD breedte = 10%>Gesloten</TD> <TD><tabel-cellpadding ="0" Cellspacing ="0" border = 0 breedte = 25%><TR bgcolor = rood><TD> </TD></tr></tabel></TD> </tr> <tr> <TD breedte = 10%>Vastgelopen</TD> <TD><tabel-cellpadding ="0" Cellspacing ="0" border = 0 breedte = 25%><TR bgcolor = rood><TD> </TD></tr></tabel></TD> </tr> </tabel> </TD> </tr> </tabel> </lichaam> </HTML> |
Ik gebruikte een dode eenvoudig benadering van mijn bars maken door het instellen van de achtergrondkleur van een rij 'Red'.
De take-away hier is dit: In het einde, alles wat we doen is het creëren van HTML met rijen en kolommen.
Sjabloon XSLT:
Ik heb de XSLT die een horizontale staafgrafiek genereert gekopieerd. Het is vrij goed commentaar dus ik zal niet veel hier met uitzondering van deze nota's toevoegen:
- Ik begon met de standaard XSL die SharePoint Designer gaf me toen ik voor het eerst de DVWP gemaakt.
- Ik was in staat om te bezuinigen dit uit de SPD 657 lijnen te 166 lijnen.
- Ik prutsen niet met de parameters XML-bestand (die losstaat van de XSL en je weet wat ik bedoel als je naar de DVWP zelf wijzigen; Er zijn twee bestanden die u kunt wijzigen). Echter, om te vereenvoudigen het, Ik bijna alle van hen verwijderen uit de XSL. Dit betekent dat als je wilt om gebruik van deze parameters, u hoeft hun variabele definities opnieuw toevoegen aan de XSL. Dat zal gemakkelijk zijn aangezien zul je de oorspronkelijke XSL-variabele definities in uw visual studio-project.
- U moet zitten kundig voor kopieer en plak deze direct in uw visual studio-project. Vervolgens, Verwijder mijn oproepen en plaats uw eigen oproepen naar "ShowBar".
- De drill down werken door het creëren van een <een href> Als dit: http://server/List?FilterField1=fieldname&FilterValue1=actualFilterValue. Deze techniek kan worden van waarde in andere contexten. Op het eerste, Ik dacht dat ik zou moeten voldoen aan een meer complexe indeling: http://server/List/AllItems.aspx?View={guid}&FilterField1=blah&FilterValue1=blah, maar in mijn omgeving dat is niet nodig. De lijst-URL wordt doorgegeven aan ons door SharePoint dus dit is vrij eenvoudig om te generaliseren.
Hier is het:
<XSL:Stylesheet Versie="1.0" uitsluiten-resultaat-voorvoegsels="RS z o s ddwrt dt msxsl" |
De resultaten:
De XSL van bovenaf genereert deze grafiek:
Boor neer aan de onderliggende gegevens door te klikken op de statuscode:
Gedachten sluiten:
Dit kan worden gegeneraliseerd?
Ik hou van deze grafische concept, maar ik haat het feit dat ik moet gaan en doen zo veel hand-codering. Ik heb een beetje denken aan of het kan worden gegeneraliseerd gegeven en ik ben optimistisch, maar ik ben ook een beetje bang dat er mogelijk een bakstenen muur ergens langs het pad dat zal niet een werk-around bieden. Als iedereen heeft een aantal goede ideeën op dit, Maak een notitie in de commentaren of e-mail me.
Verticale grafieken:
Dit is een horizontale staafgrafiek. Het is zeker mogelijk een verticale grafiek maken. We moeten alleen de HTML-code wijzigen. Ik zou start op de dezelfde manier: Maak een HTML-weergave van een verticale staafdiagram en vervolgens erachter te komen hoe om die via XSL. Als iemand geïnteresseerd in die is, Ik kan worden overgehaald om uitproberen en werken uit the kinks. Als iemand heeft dat al gedaan, laat het me weten en ik leg graag een link naar uw blog 🙂
Ik denk dat dat de uitdaging met een verticale grafiek is dat de labels voor de grafiek moeilijker zijn te beheren, maar zeker niet onmogelijk.
Veld naam Gotcha's:
Er zijn ten minste twee dingen om uit te kijken voor met uw veldnamen.
Eerste, de naam van een veld met een spatie moet worden ontsnapte in de XSL. Waarschijnlijk zal dit een probleem hier:
<XSL:variabele naam="totalProposed"
Selecteer="Graaf(/dsQueryResponse/rijen/rij[normaliseren-ruimte(@Status) = 'Voorgesteld'])" />
Als uw Status"" kolom heet eigenlijk "Status Code" dan moet u verwijzen naar het als "Status_x0020_Code":
<XSL:variabele naam="totalProposed"
Selecteer="Graaf(/dsQueryResponse/rijen/rij[normaliseren-ruimte(@ Status_x0020_Code) = 'Voorgesteld'])" />Tweede, en ik ben een beetje vaag op dit, maar je moet ook op de waarschuwing voor de veldnaam wordt dan gewijzigd. Als u de naam van het veld "Status Code" en later op, Hernoem het naar "AFE Status", de interne naam"" verandert niet. De interne naam zal nog steeds worden "Status Code" en moet worden verwezen als "Status_x0020_Code". De "andere middelen" links kan helpen opsporen en corrigeren van dit soort probleem.
Over die kleur:
Ik pakte "rood" omdat het is prettig voor mij op dit moment. Het zou niet een big deal voor het weergeven van verschillende kleuren zodat er meer dan slechts een visuele beschrijving van een getal, maar ook om een nuttige KPI. Bijvoorbeeld, Als het percentage van de "vastgelopen" AFE van is > 10% dan Toon het rode, anders laten zien in het zwart. Gebruik <XSL:Kies> om dit te bereiken.
Andere bronnen:
- De interne naam bepalen (en andere goede info) voor de gegevens in een lijst: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!134.entry
- Toon alle gegevens verstrekt door SharePoint (de ruwe XML): http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!190.entry
- Krijgen de XPATH-expressie voor een bepaalde kolom: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!155.entry
- Een andere benadering met OWA(?). Ik heb niet gegraven in het, maar ziet er veelbelovend, vooral voor cirkeldiagrammen: http://www.waka.dk/Blog/PermaLink,guid,e2532e71-d774-4ac9-8f25-883964b830f4.aspx
Gelukkig transformeren!
<einde />