Dezember | 2007 | Paul Galvins SharePoint-Raum

Ü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" 
 xmlns:msxsl="urn:Schemas-Microsoft-com:XSLT" xmlns:XSL="http://www.w3.org/1999/XSL/Transform" 
 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="urn:Schemas-Microsoft-com:Büro" xmlns:s="UUID:BDC6E3F0-6DA3-11D1-A2A3-00AA00C14882" 
 xmlns:dt="UUID:C2F41010-65B3-11 d 1-A29F-00AA00C14882" xmlns:RS="urn:Schemas-Microsoft-com:Rowset" xmlns:z="#RowsetSchema" 
 xmlns:ddwrt2="urn:FrontPage:intern">
  <XSL:Ausgabe Methode="HTML" Gedankenstrich="Nein" />
  <XSL:Dezimal-format NaN="" />
  <XSL:param Name="ListUrlDir"></XSL:param> <!-- Ich brauche diese eine Drilldown-Unterstützung.  -->

  <XSL:Vorlage Spiel="/" xmlns:SharePoint="Microsoft.SharePoint.WebControls" 
 xmlns:__designer=http://schemas.microsoft.com/WebParts/v2/DataView/designer xmlns:ASP="http://Schemas.Microsoft.com/ASPNET/20">
    <XSL:Variable Name="dvt_StyleName">Tabelle</XSL:Variable>
    <XSL:Variable Name="Zeilen" Wählen Sie="/DsQueryResponse/Zeilen/Zeile" />
    <XSL:Variable Name="dvt_RowCount" Wählen Sie="Anzahl($Zeilen)" />
    <XSL:Variable Name="IsEmpty" Wählen Sie="$Dvt_RowCount = 0" />
    <XSL:Variable Name="dvt_IsEmpty" Wählen Sie="$Dvt_RowCount = 0" />

    <XSL:Wählen Sie>
      <XSL:Wenn Test="$dvt_IsEmpty">
        Es gibt keine Daten zum Diagramm!<BR/>
      </XSL:Wenn>
      <XSL:sonst>

        <!--
          Hier beginnt die interessante Sachen.

          Wir müssen ein paar Variablen für jede Zeile in der Grafik definieren: Gesamtzahl der Elemente und Prozent.
        -->
        <XSL:Variable Name="totalProposed" Wählen Sie="Anzahl(/DsQueryResponse/Zeilen/Zeile[Normalisieren-Raum(@Status) = 'Schlug'])" />
        <XSL:Variable Name="percentProposed" Wählen Sie="$TotalProposed Div $dvt_RowCount" />

        <XSL:Variable Name="totalInProcess" Wählen Sie="Anzahl(/DsQueryResponse/Zeilen/Zeile[Normalisieren-Raum(@Status) = "In Bearbeitung"])" />
        <XSL:Variable Name="percentInProcess" Wählen Sie="$TotalInProcess Div $dvt_RowCount" />

        <XSL:Variable Name="totalStalled" Wählen Sie="Anzahl(/DsQueryResponse/Zeilen/Zeile[Normalisieren-Raum(@Status) = "Ins Stocken geraten"])" />
        <XSL:Variable Name="percentStalled" Wählen Sie="$TotalStalled Div $dvt_RowCount" />

        <!--
          Wir definieren unsere HTML-Tabelle hier.  Ich bin von einigen standard SharePoint-Stile hier um konsistent zu machen Kreditaufnahme..  Ich denke, dass es Änderungen an der globalen Css-Datei nachkommen wird, ebenso wie Thema überschreibt.
        -->
        <Tabelle Breite="100%" cellspacing="0" CellPadding="2"
Stil="Grenze-rechts: 1 Solid #C0C0C0; Grenze-Boden: 1 Solid #C0C0C0; Border-Left-style: solide; Border-Left-width: 1; Border-Top-style: solide; Border-Top-width: 1;">

           <TR>
            <TD ausrichten="Zentrum">
              <Tabelle Grenze="1" Breite="100%">

                <!--
                  Für jeden Status, die wir wollen graph, Wir nennen das "ShowBar" Vorlage.
                  Wir übergeben:
                  1. Eine Bezeichnung für die Zeile.  Dieses wird in einen Hyperlink umgewandelt..
                  2. Die Prozent (Variable von oben).
                  3. Die tatsächlichen Feldnamen des Codes aus der zugrunde liegenden Liste.  Dies muss nicht die Display-Bezeichnung übereinstimmen.
                  4. Feldwert für abgestimmt #3.
                  5. Insgesamt Elemente dieses Status-Codes (nicht die Gesamtsumme aller Status-Codes).

                  Es gibt eine <TR></TR> und die Linie horizontales Balkendiagramm.

                  Wir nennen diese Vorlage für jeden Statuscode, den wir anzeigen möchten.
                -->
                <XSL:Call-template Name="ShowBar">
                  <XSL:mit param Name="BarDisplayLabel" Wählen Sie=""Vorgeschlagen""/>
                  <XSL:mit param Name="BarPercent" Wählen Sie="$percentProposed"/>
                  <XSL:mit param Name="QueryFilterFieldName" Wählen Sie="'Status'"/>
                  <XSL:mit param Name="QueryFilterFieldValue" Wählen Sie=""Vorgeschlagen""/>
                  <XSL:mit param Name="TotalItems" Wählen Sie="$totalProposed"></XSL:mit param>
                </XSL:Call-template>

                <XSL:Call-template Name="ShowBar">
                  <XSL:mit param Name="BarDisplayLabel" Wählen Sie=""Zum Stillstand gekommen""/>
                  <XSL:mit param Name="BarPercent" Wählen Sie="$percentStalled"/>
                  <XSL:mit param Name="QueryFilterFieldName" Wählen Sie="'Status'"/>
                  <XSL:mit param Name="QueryFilterFieldValue" Wählen Sie=""Zum Stillstand gekommen""/>
                  <XSL:mit param Name="TotalItems" Wählen Sie="$totalStalled"></XSL:mit param>
                </XSL:Call-template>

                <XSL:Call-template Name="ShowBar">
                  <XSL:mit param Name="BarDisplayLabel" Wählen Sie=""In Bearbeitung""/>
                  <XSL:mit param Name="BarPercent" Wählen Sie="$percentInProcess"/>
                  <XSL:mit param Name="QueryFilterFieldName" Wählen Sie="'Status'"/>
                  <XSL:mit param Name="QueryFilterFieldValue" Wählen Sie=""In Bearbeitung""/>
                  <XSL:mit param Name="TotalItems" Wählen Sie="$totalInProcess"></XSL:mit param>
                </XSL:Call-template>

              </Tabelle>
            </TD>
          </TR>
        </Tabelle>
      </XSL:sonst>
    </XSL:Wählen Sie>
  </XSL:Vorlage>

  <!--
    Diese Vorlage funktioniert die einzelne Linien in das Balkendiagramm anzeigen.

    Sie werden wahrscheinlich die meisten Ihrer Optimierungen hier tun..
  -->
  <XSL:Vorlage Name="ShowBar">
    <XSL:param Name="BarDisplayLabel" /> <!-- Etikett zu zeigen -->
    <XSL:param Name="BarPercent"/> <!-- Prozent der Gesamtsumme. -->
    <XSL:param Name="QueryFilterFieldName"/> <!-- Verwendet, um die Abfrage zu springen & Filter -->
    <XSL:param Name="QueryFilterFieldValue"/> <!-- Verwendet, um die Abfrage zu springen & Filter -->
    <XSL:param Name="TotalItems" /> <!-- Gesamtzahl der dieses barlabel -->

    <TR>

      <!-- Die Bar selbst beschriften. -->
      <TD Klasse="MS-formbody" Breite="30%">

        <!--
          Diese nächste Anweisungen, Bauen einer Abfragezeichenfolge, die uns erlaubt, einen Drilldown in einer gefilterten Ansicht der zugrunde liegenden Daten.
          Wir machen ein paar Dinge hier verwenden:
          1. Wir können FilterField1 und FilterValue1 zu einer Liste filtern für eine Spalte übergeben..
          2. SharePoint ist ein Schlüsselparameter an uns übergeben., ListUrlDir, die auf die zugrunde liegende Liste für den diese DVWP zeigt "ausgeführt wird".

          Ist nicht XSL-Spaß?
        -->
        <XSL:Text Das Disable-Output-escaping="Ja">
        <![CDATA[<a Href ="]]></XSL:Text>
        <XSL:Wert der Wählen Sie="$ListUrlDir"/>
        <XSL:Text Das Disable-Output-escaping="Ja"><![CDATA[?FilterField1 =]]></XSL:Text>
        <XSL:Wert der Wählen Sie="$QueryFilterFieldName"/>
        <XSL:Text Das Disable-Output-escaping="Ja"><![CDATA[&FilterValue1 =]]></XSL:Text>
        <XSL:Wert der Wählen Sie="$QueryFilterFieldValue"/>
        <XSL:Text Das Disable-Output-escaping="Ja"><![CDATA[">]]></XSL:Text>
        <XSL:Wert der Wählen Sie="$BarDisplayLabel"/>
        <XSL:Text Das Disable-Output-escaping="Ja"><![CDATA[</eine>]]></XSL:Text>

        <!-- Das nächste Bit zeigt einige Zahlen im format: "(insgesamt / % von insgesamt)" -->
        (<XSL:Wert der Wählen Sie="$TotalItems"/> /

        <!-- Dies schafft eine schöne Prozent Bezeichnung für uns.  Vielen Dank, Microsoft! -->
        <XSL:Call-template Name="PercentFormat">
          <XSL:mit param Name="Prozent" Wählen Sie="$BarPercent"/>
        </XSL:Call-template>)

      </TD>

      <!-- Schließlich, Ausgeben einer <TD> Tag für die Bar selbst.-->
      <TD>
        <Tabelle CellPadding="0" cellspacing="0" Grenze="0"
Breite="{Runde($BarPercent * 100)+1}%">
          <TR bgcolor="rot">
            <XSL:Text Das Disable-Output-escaping="Ja"><![CDATA[&nbsp;]]></XSL:Text>
          </TR>
        </Tabelle>
      </TD>
    </TR>

  </XSL:Vorlage>

  <!-- Dies wird direkt von einigen XSL genommen, fand ich in einer MS-Vorlage. -->
  <XSL:Vorlage Name="PercentFormat">
    <XSL:param Name="Prozent"/>
    <XSL:Wählen Sie>
      <XSL:Wenn Test="Format-Nummer($Prozent, '#,##0%;-#,##0%')= 'NaN'">0%</XSL:Wenn>
      <XSL:sonst>
        <XSL:Wert der Wählen Sie="Format-Nummer($Prozent, '#,##0%;-#,##0%')" />
      </XSL:sonst>
    </XSL:Wählen Sie>
  </XSL:Vorlage>

</XSL:Stylesheet>

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!

Onnieren Sie meinen Blog ab!

Technorati Tags: SharePoint, DVWP, Datenansicht-Webpart, XSL, XSLT, WSS, MOOS

Paul Galvins SharePoint-Raum

Monatliche Archive: Dezember 2007

Balkendiagramme in SharePoint erstellen