Creï gràfics de barres en SharePoint

17 respostes

Visió de conjunt:

(ACTUALITZACIÓ 12/04/07: Afegit un altre recurs interessant al final vinculació a un altre bloc que tracta això mitjançant un element web molt interessant)

Aquesta entrada del bloc descriu com crear un gràfic de barres en SharePoint. Això funciona en entorns WSS tant MOSS com només depen el element web de visualització de dades.

El plantejament general és la següent:

  1. Crear una llista o biblioteca de documents que conté les dades que voleu gràfic.
  2. Lloc a la biblioteca de documents associats / costum llista a una pàgina i convertir-lo en un element web de visualització de dades (DVWP).
  3. Modificar l'XSL de la DVWP per generar el codi HTML perquè et mostra com un gràfic.

Escenari de negocis / Programa d'instal·lació:

He creat una llista personalitzada amb la columna de títol estàndard i una columna addicional, "Estat". Aquest model (elementalment molt) un "autorització de despesa" escenari on el títol representa el projecte i l'estat un valor de la llista de:

  • Proposat
  • En procés
  • Aturat

L'objectiu és produir un gràfic de barres horitzontal interactiva que Mostra aquests codis d'estat.

Han poblat la llista i s'assembla a això:

imatge

Crear l'element Web de visualització de dades:

Crear el DVWP, afegint la llista personalitzada a una pàgina (pàgina del lloc en el meu cas) i seguiu les instruccions aquí (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!395.entry).

A més de simplement crear el DVWP, També cal definir la propietat de paginació per mostrar totes les files disponibles. Per a mi, Això es veu alguna cosa com això:

imatge

En aquest punt, Sempre tanco SPD i el navegador. Jo llavors tornar a obrir la pàgina utilitzant el navegador. Això evita accidentalment mucking fins al disseny de part de web a la pàgina.

Modificar el XSLT:

Ara és el moment de modificar l'XSLT.

Sempre utilitzo visual studio per a això. (Veure aquí per a una nota important sobre intellisense que t'ajudarà alot).

Puc crear un projecte buida afegir quatre nous fitxers (substituint les paraules "Original" i "nou" Si s'escau):

  • Original.XSLT
  • New.XSLT
  • Original Params.xml
  • Params.xml nou

En el meu cas, s'assembla a això:

imatge

Modificar l'element web i copiar la params i XSL a l'Original"" versió en estudi Visual.

L'objectiu és provocar l'XSL transformar els resultats que vam tornar de la consulta DVWP en HTML que rendeix com un gràfic.

Amb aquesta finalitat, ajuda a considerar en primer lloc que el codi HTML ha de ser semblant abans podem confondre amb la bogeria que es coneix com "XSL". (Per ser clars, a continuació és simplement un exemple; no escriviu-lo o copiar i enganxar en estudi visual. Vaig donar un cop ple, punt de partida per a que més tard en el reportatge). El següent gràfic mostra es rendeix segons el codi HTML immediatament després:

Sample Bar Graph

HTML corresponent:

<HTML>
<cos>
<Centre>
<amplada de la taula = 80%>
<tr><TD><Centre>Gràfic de barres horitzontals</TD></tr>
<tr>
<TD alinear = "center">
<frontera taula = "1" amplada = 80%>
<tr>
<amplada TD = 10%>Obert</TD>
<TD><taula cellpadding ="0" cellspacing ="0" frontera = 0 width = 50%><tr bgcolor = vermell><TD>&nbsp;</TD></tr></taula></TD>
</tr>
<tr>
<amplada TD = 10%>Tancat</TD>
<TD><taula cellpadding ="0" cellspacing ="0" frontera = 0 width = 25%><tr bgcolor = vermell><TD>&nbsp;</TD></tr></taula></TD>
</tr>
<tr>
<amplada TD = 10%>Aturat</TD>
<TD><taula cellpadding ="0" cellspacing ="0" frontera = 0 width = 25%><tr bgcolor = vermell><TD>&nbsp;</TD></tr></taula></TD>
</tr>
</taula>
</TD>
</tr>
</taula>
</cos>
</HTML>

Utilitzava un enfocament totalment simple per crear la meva barres posant el color de fons d'una filera de "vermell".

És l'aquí per emportar: Al final, tots estem fent està creant HTML amb files i columnes.

Plantilla XSLT:

He copiat l'XSLT que genera un gràfic de barres horitzontal. És bastant bé comentar perquè no afegeixo molt aquí excepte aquestes notes:

  • Vaig començar amb l'omissió XSL que SharePoint Designer em va donar quan primer he creat el DVWP.
  • Jo era capaç de reduir aquest des de l'SPD 657 línies a 166 línies.
  • No perdré amb el fitxer XML de paràmetres (que és independent de l'XSL i sabrà a què em refereixo quan vas a modificar el propi DVWP; hi ha dos arxius que pot modificar). No obstant això, per tal de simplificar-lo, Em va treure gairebé tots ells de l'XSL. Això significa que si voleu fer ús d'aquests paràmetres, només cal afegir les seves definicions variables a l'XSL. Que serà fàcil ja que tindran les definicions de variable XSL originals en el seu projecte d'estudi visual.
  • Vostè hauria de ser capaç de copiar i enganxar aquesta directament en el teu projecte d'estudi visual. Llavors, treure les meves trucades i inserir el seu propi trucades a "ShowBar".
  • El desglossar els treballs creant un <un href> d'aquesta: http://server/List?FilterField1=fieldname&FilterValue1=actualFilterValue. Aquesta tècnica pot ser de valor en altres contextos. En un primer moment, Vaig pensar que seria necessari ajustar-se a un format més complex: http://server/List/AllItems.aspx?View={guid}&FilterField1=blah&FilterValue1=blah, però en el meu entorn que no és necessari. D'URL de la llista es passa a nosaltres per SharePoint perquè això és bastant fàcil de generalitzar.

Aquí és:

<XSL:full d'estil versió="1.0" excloure-resultat-prefixos="RS z o s ddwrt dt msxsl" 
 xmlns:msxsl="urna:esquemes-microsoft-com:XSLT" xmlns:XSL="http://www.w3.org/ 1999 / / transformació XSL" 
 xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" 
 xmlns:escurçó="http://schemas.microsoft.com/ASPNET/20" xmlns:DDWRT="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" 
 xmlns:o="urna:esquemes-microsoft-com:Oficina" xmlns:s="UUID:BDC6E3F0-6DA3-11D1-A2A3-00AA00C14882" 
 xmlns:DT="UUID:C2F41010-65B3 - 11d 1-A29F-00AA00C14882" xmlns:RS="urna:esquemes-microsoft-com:conjunt de files" xmlns:z="#RowsetSchema" 
 xmlns:ddwrt2="urna:FrontPage:interna">
  <XSL:sortida mètode="HTML" sagnia="no" />
  <XSL:format de decimals NaN="" />
  <XSL:Param nom="ListUrlDir"></XSL:Param> <!-- Jo necessitar això per donar suport a un trepant avall.  -->

  <XSL:plantilla Partit="/" xmlns:SharePoint="Microsoft.SharePoint.WebControls" 
 xmlns:__designer=http://schemas.microsoft.com/WebParts/v2/DataView/designer xmlns:escurçó="http://schemas.microsoft.com/ASPNET/20">
    <XSL:variable nom="dvt_StyleName">Taula</XSL:variable>
    <XSL:variable nom="Files" Selecciona="/dsQueryResponse/files/fila" />
    <XSL:variable nom="dvt_RowCount" Selecciona="Comte($Files)" />
    <XSL:variable nom="IsEmpty" Selecciona="$dvt_RowCount = 0" />
    <XSL:variable nom="dvt_IsEmpty" Selecciona="$dvt_RowCount = 0" />

    <XSL:triar>
      <XSL:Quan prova="$dvt_IsEmpty">
        Hi ha dades al gràfic!<BR/>
      </XSL:Quan>
      <XSL:en cas contrari>

        <!--
          Les coses interessants aquí comença.

          Cal definir un parell de variables per a cada fila en el gràfic: nombre total d'elements i per cent del total.
        -->
        <XSL:variable nom="totalProposed" Selecciona="Comte(/dsQueryResponse/files/fila[Normalitzar-espai(@Status) = 'Proposar'])" />
        <XSL:variable nom="percentProposed" Selecciona="$totalProposed div $dvt_RowCount" />

        <XSL:variable nom="totalInProcess" Selecciona="Comte(/dsQueryResponse/files/fila[Normalitzar-espai(@Status) = "En procés"])" />
        <XSL:variable nom="percentInProcess" Selecciona="$totalInProcess div $dvt_RowCount" />

        <XSL:variable nom="totalStalled" Selecciona="Comte(/dsQueryResponse/files/fila[Normalitzar-espai(@Status) = "Estancat"])" />
        <XSL:variable nom="percentStalled" Selecciona="$totalStalled div $dvt_RowCount" />

        <!--
          Definim la nostra taula HTML aquí.  Jo estic préstecs de alguns estàndard SharePoint estils aquí perquè sigui coherent.  Crec que complirà els canvis del fitxer global css, així com tema invalida.
        -->
        <taula amplada="100%" cellspacing="0" cellpadding="2"
estil="vora dreta: 1 #C0C0C0 sòlida; frontera-fons: 1 #C0C0C0 sòlida; vora esquerra-estil: sòlid; vora esquerra-amplada: 1; frontera-cim-style: sòlid; frontera-cim-amplada: 1;">

           <tr>
            <TD Alineació="Centre">
              <taula frontera="1" amplada="100%">

                <!--
                  Per a cada situació que volem gràfic, que anomenem la «ShowBar" plantilla.
                  Vam passar-lo:
                  1. Una etiqueta per a la fila.  Això es transforma en un enllaç.
                  2. El percentatge (variable des de dalt).
                  3. El nom de camp real del codi de la llista subjacent.  Això no ha de coincidir amb l'etiqueta d'exhibició.
                  4. Camp de valor aparellat per #3.
                  5. Total d'elements d'aquest codi d'estatus (no el total de tots els codis d'estat).

                  Que emet una <tr></tr> i la línia de gràfic de barres horitzontals.

                  Reivindiquem aquesta plantilla que voleu visualitzar cada codi d'estatus.
                -->
                <XSL:crida-plantilla nom="ShowBar">
                  <XSL:amb-param nom="BarDisplayLabel" Selecciona="'Proposar'"/>
                  <XSL:amb-param nom="BarPercent" Selecciona="$percentProposed"/>
                  <XSL:amb-param nom="QueryFilterFieldName" Selecciona="'Estat'"/>
                  <XSL:amb-param nom="QueryFilterFieldValue" Selecciona="'Proposar'"/>
                  <XSL:amb-param nom="TotalItems" Selecciona="$totalProposed"></XSL:amb-param>
                </XSL:crida-plantilla>

                <XSL:crida-plantilla nom="ShowBar">
                  <XSL:amb-param nom="BarDisplayLabel" Selecciona=""Aturat""/>
                  <XSL:amb-param nom="BarPercent" Selecciona="$percentStalled"/>
                  <XSL:amb-param nom="QueryFilterFieldName" Selecciona="'Estat'"/>
                  <XSL:amb-param nom="QueryFilterFieldValue" Selecciona=""Aturat""/>
                  <XSL:amb-param nom="TotalItems" Selecciona="$totalStalled"></XSL:amb-param>
                </XSL:crida-plantilla>

                <XSL:crida-plantilla nom="ShowBar">
                  <XSL:amb-param nom="BarDisplayLabel" Selecciona=""En procés""/>
                  <XSL:amb-param nom="BarPercent" Selecciona="$percentInProcess"/>
                  <XSL:amb-param nom="QueryFilterFieldName" Selecciona="'Estat'"/>
                  <XSL:amb-param nom="QueryFilterFieldValue" Selecciona=""En procés""/>
                  <XSL:amb-param nom="TotalItems" Selecciona="$totalInProcess"></XSL:amb-param>
                </XSL:crida-plantilla>

              </taula>
            </TD>
          </tr>
        </taula>
      </XSL:en cas contrari>
    </XSL:triar>
  </XSL:plantilla>

  <!--
    Aquesta plantilla fa el treball de mostrar línies individuals en el gràfic de barres.

    Vostè probablement a fer la majoria dels seus pessigant aquí.
  -->
  <XSL:plantilla nom="ShowBar">
    <XSL:Param nom="BarDisplayLabel" /> <!-- etiqueta per mostrar -->
    <XSL:Param nom="BarPercent"/> <!-- Per cent del total. -->
    <XSL:Param nom="QueryFilterFieldName"/> <!-- Solia anar a la consulta & filtre -->
    <XSL:Param nom="QueryFilterFieldValue"/> <!-- Solia anar a la consulta & filtre -->
    <XSL:Param nom="TotalItems" /> <!-- recompte total d'aquest barlabel -->

    <tr>

      <!-- El bar etiquetar-se. -->
      <TD classe="MS-formbody" amplada="30%">

        <!--
          Aquest pròxim conjunt d'afirmacions construeix una cadena de consulta que permet perfori avall un visualització filtrada de les dades subjacents.
          Fem ús d'unes quantes coses aquí:
          1. Podem passar FilterField1 i FilterValue1 a una llista per filtrar en una columna.
          2. SharePoint és passar un paràmetre clau per a nosaltres, ListUrlDir que apunta a la llista subjacent contra el qual aquest DVWP està "funcionant".

          XSL, tampoc?
        -->
        <XSL:text impossibilitar-sortida-escapar="Sí">
        <![CDATA[<un href ="]]></XSL:text>
        <XSL:valor de Selecciona="$ListUrlDir"/>
        <XSL:text impossibilitar-sortida-escapar="Sí"><![CDATA[?FilterField1 =]]></XSL:text>
        <XSL:valor de Selecciona="$QueryFilterFieldName"/>
        <XSL:text impossibilitar-sortida-escapar="Sí"><![CDATA[&FilterValue1 =]]></XSL:text>
        <XSL:valor de Selecciona="$QueryFilterFieldValue"/>
        <XSL:text impossibilitar-sortida-escapar="Sí"><![CDATA[">]]></XSL:text>
        <XSL:valor de Selecciona="$BarDisplayLabel"/>
        <XSL:text impossibilitar-sortida-escapar="Sí"><![CDATA[</un>]]></XSL:text>

        <!-- El bit següent mostra alguns números en el format: "(total / % del total)" -->
        (<XSL:valor de Selecciona="$TotalItems"/> /

        <!-- Això crea una etiqueta percentatge agradable per a nosaltres.  Gràcies, Microsoft! -->
        <XSL:crida-plantilla nom="percentformat">
          <XSL:amb-param nom="per cent" Selecciona="$BarPercent"/>
        </XSL:crida-plantilla>)

      </TD>

      <!-- Finalment, emeten un <TD> etiqueta pel bar propi.-->
      <TD>
        <taula cellpadding="0" cellspacing="0" frontera="0"
amplada="{ronda($BarPercent * 100)+1}%">
          <tr BGCOLOR="vermell">
            <XSL:text impossibilitar-sortida-escapar="Sí"><![CDATA[&nbsp;]]></XSL:text>
          </tr>
        </taula>
      </TD>
    </tr>

  </XSL:plantilla>

  <!-- Això és pres directament d'algunes XSL vaig trobar en una plantilla de MS. -->
  <XSL:plantilla nom="percentformat">
    <XSL:Param nom="per cent"/>
    <XSL:triar>
      <XSL:Quan prova="format de nombre($per cent, '#,##0%;-#,##0%')= 'NaN'">0%</XSL:Quan>
      <XSL:en cas contrari>
        <XSL:valor de Selecciona="format de nombre($per cent, '#,##0%;-#,##0%')" />
      </XSL:en cas contrari>
    </XSL:triar>
  </XSL:plantilla>

</XSL:full d'estil>

Els resultats:

L'XSL de dalt genera aquest gràfic:

imatge

Perfori avall les dades subjacents fent clic al codi d'estatus:

imatge

Reflexions finals:

Pot això ser generalitzada?

M'encanta aquest concepte graphing, però odio el fet que he d'entrar i fer tanta mà codificant. Li he donat una mica de pensament per si es poden generalitzar i sóc optimista, però jo també sóc una mica de por que hi hagi una paret de Maó en algun lloc al llarg del camí que no ofereix cap treball al voltant. Si algú té algunes bones idees sobre aquest, Si us plau fer una nota en els comentaris o Rebi per email.

Gràfics verticals:

Aquest és un gràfic de barres horitzontal. És certament possible crear un gràfic vertical. Només hem de canviar el codi HTML. M'agradaria començar igual: Crear una representació d'HTML d'un gràfic de barres vertical i després esbrinar com aconseguir que la via XSL. Si algú està interessat en que, Jo podria ser persuadits a provar-ho i treballar l'enrosca. Si algú ja ha fet que, please let me know and I’ll gladly link to your blog 🙂

Jo crec que el repte amb un gràfic vertical és que les etiquetes per a la gràfica són més difícils de gestionar, però certament no és impossible.

Del camp nom Gotcha:

Hi ha almenys dues coses cal buscar amb els seus noms de camp.

Primer, té un nom de camp amb un espai poder escapar a l'XSL. Això serà probablement un problema aquí:

        <XSL:variable nom="totalProposed" 
 Selecciona="Comte(/dsQueryResponse/files/fila[Normalitzar-espai(@Status) = 'Proposar'])" />

Si el seu estatus de"" columna és en realitat anomenat "codi d'estatus" llavors vostè necessita fer referència a ell com "Status_x0020_Code":

   <XSL:variable nom="totalProposed" 
 Selecciona="Comte(/dsQueryResponse/files/fila[Normalitzar-espai(@Status_x0020_Code) = 'Proposar'])" />

Segon, i estic una mica borrós en aquest, però també cal estar alerta a canvis de nom de camp del. Si anomeneu el seu camp "codi d'estatus" i més tard, Rebategi'l a "AFE estatus", el nom"intern" no canvia. El nom Interno encara serà "codi d'estatus" i cal fer referència a com "Status_x0020_Code". "Altres recursos" enllaços poden ajudar a diagnosticar i corregir aquesta classe de problema.

Sobre aquell Color:

Triava "vermell" perquè és agradable per a mi en el moment. No seria una gran cosa per mostrar diferents colors per aportar més que una descripció visual d'un nombre, però també proporcionar una útils KPI. Per exemple, Si el percentatge de "estancat" És del AFE > 10% llavors mostrar-ho vermell, en cas contrari es mostra en negre. Ús <XSL:triar> per aconseguir això.

Altres recursos:

Transformant feliç!

<final />

Subscriure's al meu blog!

17 comentaris a "Creï gràfics de barres en SharePoint”

  1. Chris B

    Aquesta pàgina gairebé acabada la tasca que estava buscant.

    Tinc un grup que vol utilitzar la llista del SharePoint enquesta per crear una enquesta setmanal. La captura? Que no volen veure el codi… O canviar el sistema cada vegada enviar l'enquesta (previst per a una actualització setmanal).

    Jo era capaç de connectar això amb la llista d'enquesta i crear el gràfic a la primera columna de resposta. Però el que puc predir són els valors i les etiquetes que necessitaran avançant. Fer matèria pitjor que poden tenir més o menys Respostes disponibles cada setmana.

    Em referiré en un altre lloc per si de cas, però ningú ha trobat una manera de crear files i Etiquetes basa en el nombre d'opcions disponibles i dinàmicament posant aquestes en comptes de dur codificar els valors esperat?

    Resposta ↓
  2. Greg Laushine

    Gràcies Pau. Molt útil. Gràcies al seu treball, Era capaç d'afegir una columna de barra de gràfic a un DVWP existent (e. g. per a les tasques) molt fàcilment amb només unes poques línies del vostre codi.
    Al SharePoint Designer, He inserit una visualització de dades amb el títol i % completar les columnes a una llista de tasques. Vaig posar el cursor en una de les cèl·lules i clic correcte. Jo Seleccioneu Insereix una columna a la dreta. En la visualització del codi, He trobat la <TD> i va substituir el <XSL:element de text dins la cel·la amb el seu codi:
    <taula cellpadding ="0" cellspacing ="0" frontera ="0"
    amplada = "{ronda(@PercentComplete * 100)+1}%">
    <estil tr = "color de fons:vermell">
    <XSL:text disable-sortida-escapant = "yes"><![CDATA[&nbsp;]]></XSL:text>
    </tr>
    </taula>

    Nota canviava el codi de color de fila de bgcolor = "Roig" a l'estil = "color de fons:vermell"
    També, va ser capaç de seleccionar una de les columnes en la meva llista (@PercentComplete) en lloc de "$BarPercent"
    Greg

    Resposta ↓
  4. Wolfgang
    Paul, Gràcies per aquest! He creat una còpia exacta de què feia i treballa gairebé perfecte. Hi havia un problema minúscul en fila el paràgraf 2n del vostre codi:
    <XSL:Partit de plantilla = "/" xmlns:SharePoint="Microsoft.SharePoint.WebControls"
    xmlns:__designer =http://schemas.microsoft.com/WebParts/v2/DataView/designer xmlns:escurçó ="http://schemas.microsoft.com/ASPNET/20"&gt;
    Després que corregís que treballa d'encant! Jo ara adaptarà això a la meva pròpia llista i estatus però estic segur que no serà dur a. (Enviaré el resultat)
    Gràcies una altra vegada
    ~ Wolle
    Resposta ↓
  5. Sense nom
    pregunta –
    Què passa si el meu gràfic, Jo volia una variable per comptar amb un estatus no només però comptar els múltiples?
    Així, per exemple si havia —
    <XSL:nom de la variable = "RequestsInitialized"
    Seleccioneu = "comte(/dsQueryResponse/files/fila[Normalitzar-espai(@Status)= 'WIP'])" />
    –La cosa és, Vull comptar instàncies d 'WIP', però també vull aquesta variable per comptar una cosa com "Pendent de revisió".. com puc fer això?
    Gràcies!
    Resposta ↓
  6. Murty Srirangam
    Hola Pau,
    Iam realment això és realment un gran esforç per vostè. Si us plau pot explicar on enviaria aquest codi. He creat una prjoect amb quatre nous fitxers. Llavors pot explicar amb més detall què hauria de fer.
    Gràcies
    Murty
    Resposta ↓
  8. Andrew Carrington
    Hola, Estic tractant de modificar lleugerament per tal que es visualitza un gràfic de tasques a una llista de tasques contra la informació d'usuari. Utilitza una columna anomenada @AssignedTo que és una columna de presència de l'usuari. Pot aconseguir-lo mostrar l'HTML prestats, però no el puc tenir a calcular i visualitzar valors.
    Algunes idees?
    Gràcies
    Andy
    Resposta ↓
  9. Patrik Luca va escriure:
    Hola Pau,
    gran post!
    Una pregunta:
    M'agradaria filtrar en dos àmbits al mateix temps: com es pot aconseguir això?
    Per exemple, una de les variables s'anomena totalStalled i es filtra en @Status.
    M'agradaria filtrar al mateix temps reduir el meu nombre de registres va tornar en un altre camp.
    Ja he trobat com fer un "OR", però donnot aconsegueix trobar l ' i’
    "O’ es pot aconseguir d'aquesta:
    <XSL:nom de la variable = "totalStalled" Seleccioneu = "comte(/dsQueryResponse/files/fila[Normalitzar-espai(@Status) = "Estancat"] | /dsQueryResponse/files/fila[Normalitzar-espai(@ExtraFilterField) = "valor"])" />
    Resposta ↓
  16. Frank

    I have a ‘Using Dashboards in SharePoint’ pregunta. We are a military hospital using MOSS standard for our Intranet and would like to build a dashboard for our Command Group to see ‘real time’ Si és possible. Un dels punts principals és visitat la càrrega de treball en temps real actual dins de les instal. lacions i, literalment, veure-ho canviar amunt i avall (pot haver de fer clic “refresc”/F5).

    Gràcies per endavant,

    Resposta ↓

Deixi una contestació

no es publicarà la seva adreça de correu electrònic. Els camps necessaris estan marcats *