Krijo grafikët Bar në SharePoint

Përmbledhje:

(UPDATE 12/04/07: Shtuar një tjetër burim interesant në fund të lidh në një tjetër blog që trajton këtë nëpërmjet një web shumë pjesë interesante)

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.

Qasja e përgjithshme është si vijon:

  1. Krijo një listë ose bibliotekën dokument që përmban të dhënat që ju doni të grafik.
  2. Vendi bibliotekë dokument lidhur / listë me porosi në një faqe dhe kthyer atë në një pjesë të të dhënave Shiko Web (DVWP).
  3. Ndrysho XSL e DVWP për të gjeneruar HTML që tregon se si një grafik.

Skenari Biznes / Setup:

Unë kam krijuar një listë me porosi me kolonën e Titullit standarde dhe një kolonë shtesë, "Status". This models (shumë e thjeshtë e) an "Authorization For Expense" skenar ku titulli paraqet projektin dhe statusi një vlerë nga lista e:

  • Propozuar
  • Në proces
  • Ngecur

Objektivi është për të prodhuar një grafik interaktiv horizontal bar që tregon se këto kode statusit.

Unë kam populluar listën dhe kjo duket si ky:

imazh

Krijo Dhënave Web Part Shiko:

Krijo DVWP duke shtuar listën me porosi në një faqe (Faqja Site në rastin tim) dhe ndiqni udhëzimet këtu (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!395.entry).

Përveç thjesht krijimin e DVWP, we also need to set the paging property to show all available rows. Për mua, kjo duket diçka si kjo:

imazh

Në këtë pikë, 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.

Ndrysho XSLT:

Është koha tani për të modifikuar XSLT.

I always use visual studio for this. (Shoh këtu Një shënim i rëndësishëm për rreth Intellisense që do të ju ndihmojë shumë).

Unë krijoj një projekt bosh shtoni katër fotografi të reja (replacing the words "Original" and "New" si të përshtatshme):

  • Original.xslt
  • New.xslt
  • Original Params.xml
  • Params.xml New

Në rastin tim, kjo duket si ky:

imazh

Modify the web part and copy the params and XSL to the "Original" Versioni në Visual Studio.

Qëllimi këtu është që të shkaktojë XSL për të transformuar rezultatet ne të kthehemi nga query DVWP në HTML që bën si një grafik.

Për këtë qëllim, it helps to first consider what the HTML should look like before we get confused by the insanity that is known as "XSL". (Të jetë i qartë, Më poshtë është thjesht një shembull; 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:

Grafiku i shiritit të mostrës

HTML Korrespondon:

<html>
<trup>
<qendër>
<Tabela width = 80%>
<tr><td><qendër>Grafiku Horizontal Bar</td></tr>
<tr>
<td align="center">
<table border="1" width = 80%>
<tr>
<td width = 10%>Hapur</td>
<td><Tabela cellpadding ="0" cellspacing ="0" border = 0 width = 50%><tr bgcolor = kuqe><td>&nbsp;</td></tr></tryezë></td>
</tr>
<tr>
<td width = 10%>Mbyllur</td>
<td><Tabela cellpadding ="0" cellspacing ="0" border = 0 width = 25%><tr bgcolor = kuqe><td>&nbsp;</td></tr></tryezë></td>
</tr>
<tr>
<td width = 10%>Ngecur</td>
<td><Tabela cellpadding ="0" cellspacing ="0" border = 0 width = 25%><tr bgcolor = kuqe><td>&nbsp;</td></tr></tryezë></td>
</tr>
</tryezë>
</td>
</tr>
</tryezë>
</trup>
</html>

I used a dead simple approach to creating my bars by setting the background color of a row to "red".

Të-larg këtu është kjo: Në fund, të gjithë ne po bëjmë është krijuar me HTML rreshtave dhe kolonave.

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:

  • Unë fillova me XSL parazgjedhur që SharePoint Designer dha mua kur unë së pari krijoi DVWP.
  • Unë kam qenë në gjendje për të shkurtuar këtë poshtë nga SPD-së 657 linja të 166 lines.
  • Unë nuk bela rreth me dosjen XML parametrave (e cila është ndarë nga XSL dhe ju do të dini se çfarë dua të them, kur ju shkoni për të modifikuar DVWP vetë; ka dy fotografi ju mund të modifikoj). Megjithatë, në mënyrë që të thjeshtojë atë, 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. Pastaj, remove my calls and insert your own calls to "ShowBar".
  • Stërvitja poshtë punon duke krijuar një <a href> si kjo: http://server/List?FilterField1=fieldname&FilterValue1=actualFilterValue. This technique may be of value in other contexts. Në fillim, Unë mendova se do të duhet të jenë në përputhje me një format më të ndërlikuar: 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.

Këtu ajo është:

<XSL:stylesheet version="1.0" përjashtojnë-rezultat-Parashtesat="ddwrt RS Z o s 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:nëpërkë="http://schemas.microsoft.com/ASPNET/20" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime"
xmlns:o="urnë:schemas-microsoft-com:zyrë" xmlns:s="UUID:BDC6E3F0-6DA3-11d1-A2A3-00AA00C14882"
xmlns:dt="UUID:C2F41010-65B3-11d1-A29F-00AA00C14882" xmlns:rs="urnë:schemas-microsoft-com:rowset" xmlns:Z="#RowsetSchema"
xmlns:ddwrt2="urnë:Ballina:i brendshëm"
> <XSL:prodhim metodë="html" porosit="jo" /> <XSL:Te Dhjeta-format NaN="" /> <XSL:param emër="ListUrlDir"></XSL:param> <!-- Unë kam nevojë për këtë për të mbështetur një stërvitje down-. --> <XSL:shabllon ndeshje="/" xmlns:SharePoint="Microsoft.SharePoint.WebControls"
xmlns:__designer=http://schemas.microsoft.com/WebParts/v2/DataView/designer xmlns:nëpërkë="http://schemas.microsoft.com/ASPNET/20"
> <XSL:variabël emër="dvt_StyleName">Tryezë</XSL:variabël> <XSL:variabël emër="Rreshtat" zgjedh="/dsQueryResponse / Rreshtat / Row" /> <XSL:variabël emër="dvt_RowCount" zgjedh="numëroj($Rreshtat)" /> <XSL:variabël emër="IsEmpty" zgjedh="$dvt_RowCount = 0" /> <XSL:variabël emër="dvt_IsEmpty" zgjedh="$dvt_RowCount = 0" /> <XSL:zgjedh> <XSL:kur provë="$dvt_IsEmpty"> Nuk ka të dhëna në grafik!<br/> </XSL:kur> <XSL:ndryshe> <!-- Stuff interesante fillon këtu. Ne kemi nevojë për të përcaktuar një palë e variablave për çdo rresht në grafik: Numri i përgjithshëm           . --> <XSL:variabël emër="totalProposed" zgjedh="numëroj(/dsQueryResponse / Rreshtat / Row[normalizojë-hapësirë(@ Status) = 'Propozuar'])" /> <XSL:variabël emër="percentProposed" zgjedh="$div totalProposed $ dvt_RowCount" /> <XSL:variabël emër="totalInProcess" zgjedh="numëroj(/dsQueryResponse / Rreshtat / Row[normalizojë-hapësirë(@ Status) = 'Në Procesin'])" /> <XSL:variabël emër="percentInProcess" zgjedh="$totalInProcess div $ dvt_RowCount" /> <XSL:variabël emër="totalStalled" zgjedh="numëroj(/dsQueryResponse / Rreshtat / Row[normalizojë-hapësirë(@ Status) = 'Ngujuar'])" /> <XSL:variabël emër="percentStalled" zgjedh="$div totalStalled $ dvt_RowCount" /> <!-- Ne define tabelën tonë HTML këtu. Unë jam duke marrë borxh nga disa standarde           . Unë mendoj se kjo do ta nderojë           . --> <tryezë gjerësi="100%" cellspacing="0" cellpadding="2" stil="kufirit të djathtë: 1 solid # C0C0C0; kufirit-poshtme: 1 solid # C0C0C0; kufirit të majtë-style: i fortë; kufirit-width majtë: 1; kufirit-top-style: i fortë; kufirit-top-width: 1;"> <tr> <td align="qendër"> <tryezë kufi="1" gjerësi="100%"> <!-- Për çdo status që ne duam të grafik, we call the "ShowBar" shabllon. Ne të kalojë atë: 1. Një emërtim për rresht. Kjo është shndërruar në një hyperlink. 2. Për qind (ndryshueshme nga lart). 3. Emri aktual Fusha e kodit nga lista themelor. Kjo                      . 4. Vlera fushë krahasohen për #3. 5. Artikuj totale e këtij kodi statusit (nuk grand total prej të gjithë                      ). Ai lëshon një <tr></tr> dhe horizontale Bar Grafiku linjë. Ne e quajmë këtë template për secilin kod statusit ne duam për të parë. --> <XSL:thirrje-template emër="ShowBar"> <XSL:me param- emër="BarDisplayLabel" zgjedh="'Propozuar'"/> <XSL:me param- emër="BarPercent" zgjedh="$percentProposed"/> <XSL:me param- emër="QueryFilterFieldName" zgjedh="'Statusi'"/> <XSL:me param- emër="QueryFilterFieldValue" zgjedh="'Propozuar'"/> <XSL:me param- emër="TotalItems" zgjedh="$totalProposed"></XSL:me param-> </XSL:thirrje-template> <XSL:thirrje-template emër="ShowBar"> <XSL:me param- emër="BarDisplayLabel" zgjedh="'Ngujuar'"/> <XSL:me param- emër="BarPercent" zgjedh="$percentStalled"/> <XSL:me param- emër="QueryFilterFieldName" zgjedh="'Statusi'"/> <XSL:me param- emër="QueryFilterFieldValue" zgjedh="'Ngujuar'"/> <XSL:me param- emër="TotalItems" zgjedh="$totalStalled"></XSL:me param-> </XSL:thirrje-template> <XSL:thirrje-template emër="ShowBar"> <XSL:me param- emër="BarDisplayLabel" zgjedh="'Në Procesi'"/> <XSL:me param- emër="BarPercent" zgjedh="$percentInProcess"/> <XSL:me param- emër="QueryFilterFieldName" zgjedh="'Statusi'"/> <XSL:me param- emër="QueryFilterFieldValue" zgjedh="'Në Procesi'"/> <XSL:me param- emër="TotalItems" zgjedh="$totalInProcess"></XSL:me param-> </XSL:thirrje-template> </tryezë> </td> </tr> </tryezë> </XSL:ndryshe> </XSL:zgjedh> </XSL:shabllon> <!-- Kjo template bën punën e shfaqur linjat individuale në grafik bar. Ju ndoshta do të bëjë më të tweaking tuaj këtu. --> <XSL:shabllon emër="ShowBar"> <XSL:param emër="BarDisplayLabel" /> <!-- etiketë për të treguar --> <XSL:param emër="BarPercent"/> <!-- Përqind të gjithsej. --> <XSL:param emër="QueryFilterFieldName"/> <!-- Përdoret për të hidhen në query & filtroni --> <XSL:param emër="QueryFilterFieldValue"/> <!-- Përdoret për të hidhen në query & filtroni --> <XSL:param emër="TotalItems" /> <!-- numërimin total të këtij barlabel --> <tr> <!-- Etiketë bar vetë. --> <td klasë="ms-formbody" gjerësi="30%"> <!-- Ky grup tjetër i deklaratave ndërton një varg pyetje që lejon           . Ne e bëjnë përdorimin e disa gjëra këtu: 1. Ne mund të kalojë FilterField1 dhe FilterValue1 në një listë për të filtruar në një kolonë. 2. SharePoint është duke kaluar një parametër kyç për ne, ListUrlDir that points to the underlying list against which this DVWP is "running". A nuk XSL fun? --> <XSL:tekst disable-output-ikin="po"> <![CDATA[<a href ="]]></XSL:tekst> <XSL:vlera-e zgjedh="$ListUrlDir"/> <XSL:tekst disable-output-ikin="po"><![CDATA[?FilterField1 =]]></XSL:tekst> <XSL:vlera-e zgjedh="$QueryFilterFieldName"/> <XSL:tekst disable-output-ikin="po"><![CDATA[&= FilterValue1]]></XSL:tekst> <XSL:vlera-e zgjedh="$QueryFilterFieldValue"/> <XSL:tekst disable-output-ikin="po"><![CDATA[">]]></XSL:tekst> <XSL:vlera-e zgjedh="$BarDisplayLabel"/> <XSL:tekst disable-output-ikin="po"><![CDATA[</një>]]></XSL:tekst> <!-- Bit tjetër tregon disa numra në formatin: "(total / % i totalil)" --> (<XSL:vlera-e zgjedh="$TotalItems"/> / <!-- Kjo krijon një etiketë të këndshme për qind për ne. Falënderim, Microsoft! --> <XSL:thirrje-template emër="percentformat"> <XSL:me param- emër="përqind" zgjedh="$BarPercent"/> </XSL:thirrje-template>) </td> <!-- Më në fund, lëshojnë një <td> tag për bar vetë.--> <td> <tryezë cellpadding="0" cellspacing="0" kufi="0" gjerësi="{rrumbullakët($* BarPercent 100)+1}%"> <tr bgcolor="i kuq"> <XSL:tekst disable-output-ikin="po"><![CDATA[&nbsp;]]></XSL:tekst> </tr> </tryezë> </td> </tr> </XSL:shabllon> <!-- Ky është marrë direkt nga disa XSL kam gjetur në një template MS. --> <XSL:shabllon emër="percentformat"> <XSL:param emër="përqind"/> <XSL:zgjedh> <XSL:kur provë="Formati-numri($përqind, '#, # # 0%;-#,##0%')= 'NaN'">0%</XSL:kur> <XSL:ndryshe> <XSL:vlera-e zgjedh="Formati-numri($përqind, '#, # # 0%;-#,##0%')" /> </XSL:ndryshe> </XSL:zgjedh> </XSL:shabllon> </XSL:stylesheet>

Rezultatet:

XSL nga lart gjeneron këtij grafiku:

imazh

Stërvitja poshtë në të dhënat themelore duke klikuar mbi kodin e statusit:

imazh

Mendime përfundimtare:

Kjo mund të përgjithësohet?

Unë e dua këtë koncept grafikët, 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, ju lutem bëni një shënim në komentet ose email mua.

Grafikët Vertical:

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, ju lutem më njoftoni dhe unë me kënaqësi do të lidhem me blogun tuaj

Unë mendoj se sfida me një grafik vertikale është se etiketat për grafikun janë më të vështira për të menaxhuar, por sigurisht jo e pamundur.

Emri Fusha e Gotcha:

Ka të paktën dy gjëra për të parë jashtë për me emrat tuaj në terren.

I parë, a field name with a space has to be escaped in the XSL. This will probably be an issue here:

        <XSL:variabël emër="totalProposed" 
zgjedh="numëroj(/dsQueryResponse / Rreshtat / Row[normalizojë-hapësirë(@ Status) = 'Propozuar'])" />

If your "Status" column is actually named "Status Code" then you need to reference it as "Status_x0020_Code":

   <XSL:variabël emër="totalProposed" 
zgjedh="numëroj(/dsQueryResponse / Rreshtat / Row[normalizojë-hapësirë(@ Status_x0020_Code) = 'Propozuar'])" />

I dytë, dhe unë jam një fuzzy pak në këtë, but you also need to be on the alert for field name changes. If you name your field "Status Code" dhe pastaj më vonë, 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" Lidhje mund të ndihmojë në diagnostikimin dhe korrigjuar këtë lloj problemi.

Rreth asaj Color:

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. Për shembull, if the percentage of "stalled" AFE-së është > 10% pastaj të tregojë atë të kuqe, otherwise show it in black. Përdorim <XSL:zgjedh> për të arritur këtë.

Burime të tjera:

Gëzuar transformuar!

<Fundi />

Abonohen në blogun tim!

17 mendime mbi "Krijo grafikët Bar në SharePoint

  1. Chris B

    Kjo faqe pothuajse të përfunduar detyrën isha duke kërkuar për.

    Unë kam një grup që dëshiron të përdorin listën Survey SharePoint për të krijuar një sondazh javore. Kapur? Ata nuk duan të shohin kodin… Ose të ndryshojë sistemin e çdo herë ata dërgojnë sondazh (planifikuar për një përditësim javore).

    Unë kam qenë në gjendje të lidhë këtë në listën Anketa dhe për të krijuar graf në kolonën Përgjigja e parë. Ajo që unë nuk mund të parashikojë edhe pse janë vlerat dhe etiketat që ata do të duhet lëvizur përpara. Për t'i bërë gjërat edhe më keq ata mund të kenë më shumë përgjigje ose më pak në dispozicion çdo javë.

    Unë do të shohim diku tjetër vetëm në rast, por dikush ka gjetur një mënyrë për të krijuar rreshtave dhe etiketat bazuar jashtë e numrit të opsioneve në dispozicion dhe dinamike vendosjen e këtyre sesa e vështirë coding vlerat e pritura?

  2. Greg Laushine

    Faleminderit Paul. Shumë e dobishme. Faleminderit për punën tuaj, Unë kam qenë në gjendje të shtoni një kolonë në një grafik bar DVWP ekzistuese (e.g. për detyra të) shumë lehtë me vetëm disa rreshta të kodit tuaj.
    Në SharePoint Designer, Kam futur një pamje të të dhënave me titull dhe % Kolonat e plotë nga një listë detyrë. I vënë kursorin në një nga qelizat e drejtë click. Unë zgjidhni futur një kolonë të drejtë. Në pikëpamje të kodit, Kam gjetur <td> dhe zëvendësohet <XSL:element teksti brenda qelizave me kodin tuaj:
    <Tabela cellpadding ="0" cellspacing ="0" border ="0"
    width="{rrumbullakët(@ PercentComplete * 100)+1}%">
    <tr style="background-color:red">
    <XSL:text disable-output-escaping="yes"><![CDATA[&nbsp;]]></XSL:tekst>
    </tr>
    </tryezë>

    Note I changed the row color code from bgcolor="red" to style="background-color:i kuq"
    Edhe, ishte në gjendje për të zgjedhur një prej kolonave në listën time (@ PercentComplete) in place of "$BarPercent"
    Greg

  3. Wolfgang
    Paul, thanks për këtë! Unë të krijova një kopje të saktë të asaj që keni bërë dhe ajo punon pothuajse të përsosur. There was one tiny issue in row the 2nd paragraph of your code:
    <XSL:template match="/" xmlns:SharePoint="Microsoft.SharePoint.WebControls"
    xmlns:__designer =http://schemas.microsoft.com/WebParts/v2/DataView/designer xmlns:asp ="http://schemas.microsoft.com/ASPNET/20"&gt;
    Pasi kam korrigjuar se ajo punon si hajmali! Unë tani do të këtë të përshtaten në listën time personale dhe statusi, por unë jam i sigurt se nuk do të jetë e vështirë. (Unë do të shpallë rezultatin)
    Thanks again
    ~ Ortaku
  4. No name
    pyetje –
    Çka nëse në grafikun tim, Doja një ndryshore jo vetëm për të numëruar një status por ato llogarisin të shumta?
    Kështu, për shembull, çfarë nëse kam pasur —
    <XSL:variable name="RequestsInitialized"
    select="count(/dsQueryResponse / Rreshtat / Row[normalizojë-hapësirë(@ Status)=’WIP’])" />
    –Gjë është, I want it to count instances of ‘WIP’, but i also want this variable to count something else like ‘Pending Review’.. how would i do this?
    Falënderim!
  5. Murty Srirangam
    Hi Pali,
    Iam really this is really a great effort by you. Mund të ju lutem shpjegoni se ku do i postoj këtë kod. Unë kam krijuar një prjoect me katër fotografi të reja. Pastaj mund ta shpjegoni më në detaje se çfarë duhet të bëj.
    Falemnderit
    Murty
  6. Andrew Carrington
    Hi, Unë jam duke u përpjekur për të modifikuar këtë pak në mënyrë që ajo tregon një grafiku e detyrave në një listë detyrë kundër informacionin e përdoruesit. Ajo përdor një kolonë të quajtur @ AssignedTo e cila është një prani përdorues kolona. Unë mund të merrni atë për të shfaqur Teh dhënë HTML, por cant get it për të llogaritur dhe të shfaqin vlerat.
    Ndonjë ide?
    Falënderim
    Andy
  7. Patrik Luca shkroi:
    Hi Pali,
    post i madh!
    Një pyetje:
    Unë do të doja të filtruar në dy fusha në të njëjtën kohë: se si mund të arrihet kjo?
    Për shembull, njëri prej variablave tuaj është quajtur totalStalled dhe ajo filtron mbi Statusin @.
    Unë do të doja të filtruar në të njëjtën kohë për të reduktuar numrin tim e të dhënave të kthyer në një fushë tjetër.
    I already found how to make an ‘OR’, but I donnot manage to find the ‘AND’
    An ‘OR’ si mund të arrihet kjo:
    <XSL:variable name="totalStalled" select="count(/dsQueryResponse / Rreshtat / Row[normalizojë-hapësirë(@ Status) = ‘Stalled’] | /dsQueryResponse / Rreshtat / Row[normalizojë-hapësirë(@ ExtraFilterField) = ‘value’])" />
  8. Robin Meuré

    Hi Pali!

    Nice work! Unë gjithashtu kisha diçka të tillë në mendjen time për të parë listat e SharePoint në një mënyrë grafike 😉

  9. I sinqertë

    Unë kam një ‘Duke përdorur pultet në SharePoint’ pyetje. Ne jemi një spital ushtarak që përdor standardin MOSS për Intranet-in tonë dhe do të dëshironim të ndërtonim një tabelë për Komandën tonë për të parë time në kohë reale’ nëse është e mundur. Një nga pikat kryesore është shikimin ngarkesën e punës në kohë reale aktuale brenda objektit fjalë për fjalë dhe të shikojnë atë të ndryshojë lart dhe poshtë (mund të keni të klikoni “freskoj”/F5).

    Thank you in advance,

Lini një Përgjigju

Adresa juaj e emailit nuk do të publikohet. Fusha e kërkuar janë shënuar *