Übersicht:
(UPDATE 12/04/07: Eine andere interessante Ressource hinzugefügt am Ende Verknüpfung zu einem anderen Blog, der diese Adressen über ein sehr interessantes Webpart)
Dieser Blog-Eintrag beschreibt, wie erstellen Sie ein Balkendiagramm in SharePoint. Dies funktioniert in WSS und MOSS-Umgebungen, wie es nur die Datenansicht-Webpart abhängt.
Das Gesamtkonzept ist wie folgt:
- Erstellen einer Liste oder Dokumentbibliothek, die die Daten enthält, die Sie grafisch darstellen möchten.
- Legen Sie die zugehörige Dokumentbibliothek / benutzerdefinierte Liste auf einer Seite und konvertieren es in eine Datenansicht-Webpart (DVWP).
- Ändern der DVWP XSL, HTML zu generieren, die zeigt, wie ein Diagramm.
Business-Szenario / Einrichtung:
Ich habe eine benutzerdefinierte Liste mit standard Title-Spalte und eine zusätzliche Spalte erstellt., "Status". Diese Modelle (sehr einfach) eine "Ermächtigung für Kosten" Szenario, wo der Titel des Projekts und den Status einen Wert aus der Liste der darstellt:
- Vorgeschlagen
- Im Prozess
- Ins Stocken geraten
Ziel ist es, ein interaktives Balkendiagramm zu erzeugen, das diese Statuscodes zeigt.
Ich habe die Liste aufgefüllt und es sieht wie folgt aus:
Datenansicht-Webpart erstellen:
Erstellen Sie die DVWP durch Hinzufügen der benutzerdefinierten Liste zu einer Seite (Seite in meinem Fall) und folgen Sie den Anweisungen Hier (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!395.entry).
Zusätzlich zu den DVWP einfach erstellen, Wir müssen auch die Auslagerungsdatei Eigenschaftensatz alle verfügbare Zeilen anzeigen. Für mich, Dies sieht etwa wie folgt:
An diesem Punkt, Ich schließe immer SPD und browser. Ich öffnen erneut dann die Seite mit dem browser. Dadurch wird vermieden, das Web-Teil-Layout auf der Seite versehentlich mucking.
Ändern der XSLT-Datei:
Es ist jetzt Zeit, um die XSLT-Datei ändern.
Ich benutze immer visual Studio dafür. (Siehe Hier für ein wichtiger Hinweis über Intellisense, das Ihnen viel hilft).
Erstellen Sie ein leeres Projekt vier neue Dateien hinzufügen (die Worte "Original ersetzen" und "neu" gegebenenfalls):
- Original.XSLT
- New.XSLT
- Original Params.xml
- Neue Params.xml
In meinem Fall, Es sieht wie folgt aus:
Ändern Sie das Webpart und kopieren Sie die Params und XSL zum "Original" Version in Visual Studio.
Hier soll dazu führen, dass die XSL-Datei, die Ergebnisse erhalten wir wieder aus der Abfrage DVWP in HTML, das als Diagramm dargestellt wird.
Zu diesem Zweck, Es hilft, um zuerst zu prüfen, wie der HTML-Code aussehen sollte, bevor wir durch den Wahnsinn verwirrt werden, die bekannt ist als "XSL". (Klar, Das folgende ist nur ein Beispiel; nicht geben Sie ein oder kopieren und Einfügen in visual studio. Ich biete einen vollen Schlag Ausgangspunkt dafür später in der Zuschreibung). Die folgende Beispiel-Grafik wird gemäss den HTML-Code direkt im Anschluss dargestellt.:
Entsprechende HTML:
<HTML> <Körper> <Zentrum> <Tisch Breite = 80 %> <TR><TD><Zentrum>Horizontale Balken Diagramm</TD></TR> <TR> <td align = "center"> <Tabelle Border = "1" Breite = 80 %> <TR> <TD-Breite = 10 %>Offen</TD> <TD><Tabelle Cellpadding ="0" Cellspacing ="0" Border = 0 Width = 50 %><TR Bgcolor = rot><TD> </TD></TR></Tabelle></TD> </TR> <TR> <TD-Breite = 10 %>Geschlossen</TD> <TD><Tabelle Cellpadding ="0" Cellspacing ="0" Border = 0 Width = 25 %><TR Bgcolor = rot><TD> </TD></TR></Tabelle></TD> </TR> <TR> <TD-Breite = 10 %>Ins Stocken geraten</TD> <TD><Tabelle Cellpadding ="0" Cellspacing ="0" Border = 0 Width = 25 %><TR Bgcolor = rot><TD> </TD></TR></Tabelle></TD> </TR> </Tabelle> </TD> </TR> </Tabelle> </Körper> </HTML> |
Ich habe einen Tote einfachen Ansatz zum Erstellen meiner Balken durch Festlegen der Hintergrundfarbe einer Zeile auf "rot".
Das ist hier der Take-Away: Am Ende, alles, was wir tun, ist HTML mit Zeilen und Spalten erstellen.
Vorlage XSLT:
Ich habe die XSLT-Datei kopiert, die ein Balkendiagramm generiert. Es ist ziemlich gut kommentiert, so dass ich viel hier außer diese Notizen hinzufügen, wird nicht:
- Ich begann mit der standardmäßigen XSL, die SharePoint Designer mir, gab wenn ich zuerst die DVWP erstellt.
- Ich konnte dies von der SPD zu senken 657 Linien 166 Linien.
- Ich Herumspielen nicht mit der Parameter-XML-Datei (ist die aus dem XSL getrennt und Sie wissen was ich meine, wenn Sie gehen zu den DVWP selbst ändern; Es gibt zwei Dateien, die Sie ändern können). Jedoch, um es zu vereinfachen, Ich fast alle von ihnen aus dem XSL entfernen.. Das heißt, wenn Sie möchten verwenden Sie dieser Parameter, Sie müssen nur ihre Variablendefinitionen wieder die XSL-Datei hinzufügen. Das wird leicht sein, da Sie die ursprünglichen XSL Variablendefinitionen in visual Studio-Projekt müssen.
- Sie sollten können kopieren und fügen diesen direkt in Ihre visual Studio-Projekt. Dann, Entfernen Sie meine Anrufe und legen Sie Ihre eigenen Aufrufe von "ShowBar".
- Die Drilldown-Werke durch die Schaffung einer <ein href> So: http://server/List?FilterField1=fieldname&FilterValue1=actualFilterValue. Diese Technik kann sein Wert in anderen Kontexten. Auf den ersten, Ich dachte, ich müsste zu einem komplexeren Format entsprechen: http://server/List/AllItems.aspx?View={guid}&FilterField1=blah&FilterValue1=blah, aber in meinem Umfeld, das ist nicht nötig. Der Liste URL wird von SharePoint an uns übergeben, so ist dies ganz einfach zu verallgemeinern.
Hier ist es:
<XSL:Stylesheet Version="1.0" Exclude-Ergebnis-Präfixe="RS z o s Ddwrt dt msxsl" |
Die Ergebnisse:
Die XSL-Datei von oben generiert dieses Diagramm:
Einen Drilldown zum zugrunde liegenden Daten durch Klicken auf den Statuscode:
Abschließende Gedanken:
Dies kann verallgemeinert werden?
Ich liebe diese Grafik Konzept, aber ich hasse die Tatsache, dass ich zu gehen und tun, soviel Hand-Codierung. Ich habe ein wenig Gedanken, ob es verallgemeinert werden kann und ich bin optimistisch, aber ich bin auch ein wenig Angst, dass es möglicherweise eine Mauer irgendwo entlang des Weges, die Problemumgehung anbieten werden nicht. Wenn jemand einige guten Ideen auf dieser, Bitte notieren Sie in den Kommentaren oder mailen Sie mir.
Vertikale Diagramme:
Dies ist ein Balkendiagramm. Es ist sicherlich möglich, ein vertikaler Graph erstellen. Wir müssen nur den HTML-Code ändern. Ich würde die gleiche Weise starten.: Erstellen Sie eine HTML-Darstellung ein vertikales Balkendiagramm und dann ausrechnen Sie wie zu erhalten, die über XSL. Wenn jemand interessiert ist, Ich konnte davon überzeugt werden, probieren es aus und erarbeiten die Schleifen. Wenn jemand schon gemacht hat, Bitte lassen Sie mich wissen und ich werde Link gerne in einen Blog 🙂
Ich denke, dass die Herausforderung mit einem vertikalen Diagramm ist, dass die Etiketten für den Graphen schwieriger sind zu verwalten, aber sicherlich nicht unmöglich.
Feld Name Gotcha:
Es gibt mindestens zwei Dinge zu achten, mit den Feldnamen.
Erste, ein Feldname mit einem Leerzeichen muss in dem XSL mit Escapezeichen versehen werden. Dies wird wohl hier ein Problem sein.:
<XSL:Variable Name="totalProposed"
Wählen Sie="Anzahl(/DsQueryResponse/Zeilen/Zeile[Normalisieren-Raum(@Status) = 'Schlug'])" />
Wenn Ihr Status"" Spalte ist tatsächlich mit dem Namen "Status Code" dann müssen Sie es als "Status_x0020_Code" verweisen:
<XSL:Variable Name="totalProposed"
Wählen Sie="Anzahl(/DsQueryResponse/Zeilen/Zeile[Normalisieren-Raum(@ Status_x0020_Code) = 'Schlug'])" />Sekunde, und ich bin ein wenig fuzzy zu diesem, aber du musst auch auf der Hut vor Feld Namensänderungen werden. Wenn Sie das Feld "Status Code nennen" und dann später, Benennen sie die "AFE-Status", der interne Name"" ändert sich nicht. Der interne Name wird noch "Status-Code sein." und muss verwiesen werden, als "Status_x0020_Code". Die "anderen Ressourcen" Links kann zu diagnostizieren und korrigieren Sie diese Art von Problem helfen.
Über die Farbe:
Ich nahm "rot" Da es mir im Moment erfreut. Es wäre keine große Sache, um mehr als nur eine visuelle Beschreibung einer Reihe bieten verschiedene Farben zeigen, sondern auch einen nützlichen KPI zu schaffen. Zum Beispiel, Wenn der Prozentsatz der "ins Stocken geraten" Der AFE ist > 10% dann zeigen Sie es rot, zeigen Sie es andernfalls in schwarz. Verwendung <XSL:Wählen Sie> um dies zu erreichen.
Weitere Ressourcen:
- Ermitteln Sie den internen Namen (und andere gute Infos) für die Daten in einer Liste: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!134.entry
- Zeigen Sie alle Daten von SharePoint (die XML-Rohdaten): http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!190.entry
- Erhalten Sie den XPATH-Ausdruck einer bestimmten Spalte: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!155.entry
- Ein weiterer Ansatz mithilfe von OWA(?). Ich habe nicht hinein gegraben., aber sieht vielversprechend aus, vor allem für Kreisdiagramme: http://www.waka.dk/Blog/PermaLink,guid,e2532e71-d774-4ac9-8f25-883964b830f4.aspx
Glücklich verändern!
<Ende />
Diese Seite fast die Aufgabe, die ich suchte abgeschlossen.
Ich habe eine Gruppe, die die SharePoint-Umfrage-Liste verwenden, zum Erstellen einer pro Umfrage möchte. Der Fang? Sie wollen nicht Code finden Sie unter… Oder das System zu ändern, jedes Mal, wenn sie die Umfrage senden (für ein wöchentliches Update geplant).
Ich konnte dies der Umfrage Liste herstellen und erstellen Sie das Diagramm in der ersten Antwort-Spalte. Was ich kann nicht vorhersagen, aber die Werte und Beschriftungen, die sie benötigen, sind voran. Fragen zu schlechter müssen mehr oder weniger Antworten zur Verfügung jede Woche Sie.
Ich werde an anderer Stelle nur für den Fall prüfen., aber hat jemand eine Möglichkeit zum Erstellen von Zeilen und Etiketten auf der Grundlage von die Anzahl der verfügbaren Optionen und dynamisch festlegen diese anstatt Hartcodierung von den erwarteten Werten gefunden?
Danke Paul. Sehr hilfreich. Vielen Dank für Ihre Arbeit, Ich war in der Lage, eine vorhandene DVWP eine Graph Bar Spalte hinzu (zB. für Aufgaben) sehr leicht mit nur wenigen Zeilen code.
In SharePoint Designer, Einfügen eine Datenansicht mit dem Titel und % vollständige Spalten aus einer Aufgabenliste. Ich bringen Sie den Cursor in eine der Zellen, und klicken Sie mit der rechten Maustaste auf. Ich wählen Sie eine Spalte rechts einfügen. In der Codeansicht, Ich fand die <TD> und ersetzt die <XSL:Text-Element innerhalb der Zelle mit dem code:
<Tabelle Cellpadding ="0" Cellspacing ="0" Grenze ="0"
Breite = "{Runde(@ PercentComplete * 100)+1}%">
<TR Style = "Background-Color:rot">
<XSL:Text das Disable-Output-escaping = "yes"><![CDATA[ ]]></XSL:Text>
</TR>
</Tabelle>
Hinweis ich änderte den Zeile Farbencode von Bgcolor = "rot" auf Style = "Background-Color:rot"
Auch, konnte eine der Spalten in der Liste wählen (@ PercentComplete) anstelle von "$ BarPercent"
Greg
Eine andere Methode (mithilfe der SharePoint-Benutzeroberfläche):
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">
Wählen Sie "Anzahl =(/DsQueryResponse/Zeilen/Zeile[Normalisieren-Raum(@Status)= 'RIF'])" />
http://www.microsoft.com/sharepoint/downloads/components/detail.asp?a1=701Ian Morrish stellte diese im Mai 2006. Ich versuchte in MOSS 2007 und es funktioniert gut. GAC hinzugefügt, Execadmsvcjobs und Iisreset musste…
Großen Beitrag, Vielen Dank!
Großen Beitrag, Vielen Dank!
Hallo Paul!
Fein wirken! Ich hatte auch so etwas in meinem Kopf Sharepoint-Listen in grafischer Form anzuzeigen 😉
Ich habe ein ‚Mit Dashboards in Sharepoint’ Frage. Wir sind ein Lazarett mit MOSS Standard für unser Intranet und möchten ein Dashboard bauen für unsere Command Group ‚Echtzeit sehen’ Wenn möglich. Einer der wichtigsten Punkte ist die Echtzeit-aktuelle Arbeitsauslastung innerhalb der Einrichtung anzeigen und buchstäblich sehen sie oben und unten ändern (Möglicherweise müssen Sie klicken Sie auf “Aktualisieren”/F5).
Vielen Dank im voraus,
Sie können tun, etwas sinnvolles mit jQuery, diesen Effekt zu erreichen. Mailen Sie mich an Galvin.Paul@gmail.com und ich werde gerne versuchen und geben eine hand.