Креирај Бар графики во SharePoint

17 одговори

Преглед:

(Ажурирање 12/04/07: Додаде уште еден интересен ресурс на крајот поврзување во друг блог во кој се обраќа ова преку еден многу интересен веб дел)

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.

Целокупниот пристап е како што следува:

  1. Создаде листа или документ библиотека која ги содржи податоците кои сакате да графикон.
  2. Место придружните документ библиотека / обичај листа врз една страница и да го претворите во податоци видите веб дел (DVWP).
  3. Менувате DVWP е XSL да генерира HTML, која покажува како графика.

Бизнис сценарио / Подесување:

Имам креирано сопствен листа со стандардот Наслов колона и еден дополнителен колона, "Status". This models (Многу simplistically) an "Authorization For Expense" сценарио, каде што насловот го претставува проектот и статус вредност од листата на:

  • Предложени
  • Во Процес
  • Квадрирање

Целта е да се произведе интерактивна хоризонтална бар графикон кој го покажува овие статусот кодови.

Имам населени листата и тоа би изгледало вака:

сликата

Креирај Data View Веб Дел:

Создаде DVWP со додавање на сопствени листа на страница (сајт страница во мојот случај) и следете ги инструкциите тука (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!395.entry).

Во прилог на едноставно креирање на DVWP, we also need to set the paging property to show all available rows. За мене, ова изгледа нешто како ова:

сликата

Во овој момент, 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.

Измени на XSLT:

Сега е време за менување на XSLT.

I always use visual studio for this. (Види тука за важна забелешка за IntelliSense кои ќе ви помогнат многу).

Јас создаде празен проект додадете четири нови датотеки (replacing the words "Original" and "New" како што е соодветно):

  • Original.xslt
  • New.xslt
  • Оригинални Params.xml
  • Нови Params.xml

Во мојот случај, тоа би изгледало вака:

сликата

Modify the web part and copy the params and XSL to the "Original" верзија во Visual Studio.

Целта тука е да се предизвика XSL да се трансформира на резултатите кои ги добивме назад од DVWP пребарување во HTML дека прави како графика.

За таа цел, it helps to first consider what the HTML should look like before we get confused by the insanity that is known as "XSL". (Да биде јасно, следниве е само пример; 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:

Sample Bar Graph

Соодветните HTML:

<html>
<тело>
<центар>
<маса широчина = 80%>
<tr><td><центар>Хоризонтална Бар График</td></tr>
<tr>
<td align="center">
<table border="1" ширина = 80%>
<tr>
<td ширина = 10%>Отворете</td>
<td><маса ќелии: ="0" пополнувањето ="0" border = 0 width = 50%><tr bgcolor = црвена><td>&nbsp;</td></tr></маса></td>
</tr>
<tr>
<td ширина = 10%>Затворена</td>
<td><маса ќелии: ="0" пополнувањето ="0" border = 0 width = 25%><tr bgcolor = црвена><td>&nbsp;</td></tr></маса></td>
</tr>
<tr>
<td ширина = 10%>Квадрирање</td>
<td><маса ќелии: ="0" пополнувањето ="0" border = 0 width = 25%><tr bgcolor = црвена><td>&nbsp;</td></tr></маса></td>
</tr>
</маса>
</td>
</tr>
</маса>
</тело>
</html>

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

Се-далеку тука е овој: На крајот, сите што го правиме е создавање HTML со редови и колони.

Шаблон 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:

  • Почнав со стандардната XSL дека SharePoint Designer ми даде кога јас прв пат создадоа DVWP.
  • Јас бев во можност да се намали оваа надолу од СПД 657 линии за 166 lines.
  • Јас не збрка околу со параметрите XML датотека (кој е одделен од XSL и ќе знаеш што сакам да кажам кога ќе одат да ги менувате DVWP себе; постојат две датотеки можете да менувате). Сепак, со цел да се поедностави, 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. Потоа, remove my calls and insert your own calls to "ShowBar".
  • На разбивка работи со создавање на <a href> вака: http://server/List?FilterField1=fieldname&FilterValue1=actualFilterValue. This technique may be of value in other contexts. На прв, Мислев дека ќе треба да се во согласност со посложени формат: 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.

Тука е:

<XSL:интерфејс верзија="1.0" исклучи-резултат-префикси="rs, со грејс z о е DDWRT dt msxsl" 
 xmlns:msxsl="затрупано:шеми-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:на="затрупано:шеми-Microsoft-COM:канцеларија" xmlns:на="UUID:BDC6E3F0-6DA3-11d1-A2A3-00AA00C14882" 
 xmlns:dt="UUID:C2F41010-65B3-11d1-A29F-00AA00C14882" xmlns:rs, со грејс="затрупано:шеми-Microsoft-COM:rowset" xmlns:од="#RowsetSchema" 
 xmlns:ddwrt2="затрупано:Насловна:внатрешна">
  <XSL:излез метод="html" алинеја="не" />
  <XSL:децимална формат NaN="" />
  <XSL:престанат име="ListUrlDir"></XSL:престанат> <!-- Сакам тоа да ја поддржи вежба-долу.  -->

  <XSL:дефиниција одговара="/" xmlns:SharePoint="Microsoft.SharePoint.WebControls" 
 xmlns:__designer=http://schemas.microsoft.com/WebParts/v2/DataView/designer xmlns:asp="HTTP://schemas.microsoft.com/ASPNET/20">
    <XSL:променлива име="dvt_StyleName">Табела</XSL:променлива>
    <XSL:променлива име="Редови" изберете="/dsQueryResponse / Редови / Row" />
    <XSL:променлива име="dvt_RowCount" изберете="смета($Редови)" />
    <XSL:променлива име="IsEmpty" изберете="$dvt_RowCount = 0" />
    <XSL:променлива име="dvt_IsEmpty" изберете="$dvt_RowCount = 0" />

    <XSL:изберете>
      <XSL:кога тест="$dvt_IsEmpty">
        Нема податоци за графикон!<BR/>
      </XSL:кога>
      <XSL:во спротивно>

        <!--
          На интересни нешта започнува тука.

          Ние треба да се дефинираат еден пар на варијабли за секој ред во графиконот: вкупниот број
          .
        -->
        <XSL:променлива име="totalProposed" изберете="смета(/dsQueryResponse / Редови / Row[нормализираат-простор(@ Статус) = 'Предлог "])" />
        <XSL:променлива име="percentProposed" изберете="$totalProposed div $ dvt_RowCount" />

        <XSL:променлива име="totalInProcess" изберете="смета(/dsQueryResponse / Редови / Row[нормализираат-простор(@ Статус) = 'Во Процес "])" />
        <XSL:променлива име="percentInProcess" изберете="$totalInProcess div $ dvt_RowCount" />

        <XSL:променлива име="totalStalled" изберете="смета(/dsQueryResponse / Редови / Row[нормализираат-простор(@ Статус) = 'Возастој "])" />
        <XSL:променлива име="percentStalled" изберете="$totalStalled div $ dvt_RowCount" />

        <!--
          Ние се дефинираат нашите HTML табела овде.  Јас сум позајмување од некои стандардни
          .  Мислам дека тоа ќе го уважиме
          .
        -->
        <маса ширина="100%" пополнувањето="0" ќелии:="2"
стил="граница-десно: 1 солидна # C0C0C0; границата дното: 1 солидна # C0C0C0; граница-лево-стил: солидна; граница-лево-ширина: 1; граница-топ-стил: солидна; граница-топ-ширина: 1;">

           <tr>
            <td усогласување на="центар">
              <маса границата="1" ширина="100%">

                <!--
                  За секој статусот што сакаме да графикон, we call the "ShowBar" дефиниција.
                  Ние го помине:
                  1. А етикета за ред.  Ова се претвора во хиперврска.
                  2. На проценти (променлива од горе).
                  3. Вистинската име на поле на кодот од основната листа.  Овој
                     .
                  4. Областа вредност се исти за #3.
                  5. Вкупно предмети од овој статус код (не големото вкупниот износ на сите
                     ).

                  Тоа емитира <tr></tr> и хоризонтална графика линија.

                  Ние го нарекуваме овој образец за секој код за статус сакаме да ја видите.
                -->
                <XSL:повик-дефиниција име="ShowBar">
                  <XSL:со-Парам име="BarDisplayLabel" изберете=""Предлог""/>
                  <XSL:со-Парам име="BarPercent" изберете="$percentProposed"/>
                  <XSL:со-Парам име="QueryFilterFieldName" изберете=""Статус""/>
                  <XSL:со-Парам име="QueryFilterFieldValue" изберете=""Предлог""/>
                  <XSL:со-Парам име="TotalItems" изберете="$totalProposed"></XSL:со-Парам>
                </XSL:повик-дефиниција>

                <XSL:повик-дефиниција име="ShowBar">
                  <XSL:со-Парам име="BarDisplayLabel" изберете=""Возастој""/>
                  <XSL:со-Парам име="BarPercent" изберете="$percentStalled"/>
                  <XSL:со-Парам име="QueryFilterFieldName" изберете=""Статус""/>
                  <XSL:со-Парам име="QueryFilterFieldValue" изберете=""Возастој""/>
                  <XSL:со-Парам име="TotalItems" изберете="$totalStalled"></XSL:со-Парам>
                </XSL:повик-дефиниција>

                <XSL:повик-дефиниција име="ShowBar">
                  <XSL:со-Парам име="BarDisplayLabel" изберете=""Во процесот""/>
                  <XSL:со-Парам име="BarPercent" изберете="$percentInProcess"/>
                  <XSL:со-Парам име="QueryFilterFieldName" изберете=""Статус""/>
                  <XSL:со-Парам име="QueryFilterFieldValue" изберете=""Во процесот""/>
                  <XSL:со-Парам име="TotalItems" изберете="$totalInProcess"></XSL:со-Парам>
                </XSL:повик-дефиниција>

              </маса>
            </td>
          </tr>
        </маса>
      </XSL:во спротивно>
    </XSL:изберете>
  </XSL:дефиниција>

  <!--
    Овој шаблон не работата за прикажување на индивидуалните линии во бар графикон.

    Најверојатно ќе направи поголемиот дел од вашето tweaking овде.
  -->
  <XSL:дефиниција име="ShowBar">
    <XSL:престанат име="BarDisplayLabel" /> <!-- етикетата за да се покаже -->
    <XSL:престанат име="BarPercent"/> <!-- Проценти од вкупно. -->
    <XSL:престанат име="QueryFilterFieldName"/> <!-- Се користи за да скокнат до пребарување & филтер -->
    <XSL:престанат име="QueryFilterFieldValue"/> <!-- Се користи за да скокнат до пребарување & филтер -->
    <XSL:престанат име="TotalItems" /> <!-- вкупно пребројувањето на овој barlabel -->

    <tr>

      <!-- Бар етикета себе. -->
      <td класа="MS-formbody" ширина="30%">

        <!--
          Ова следниот сет на изјавите гради на барањето кој им овозможува на
          .
          Ние се направи употреба на неколку работи тука:
          1. Ние може да помине FilterField1 и FilterValue1 на листата за филтрирање на колона.
          2. SharePoint поминува клучен параметар за нас, ListUrlDir that points to
             the underlying list against which this DVWP is "running".

          Не XSL забава?
        -->
        <XSL:текст disable-излез-бегство="Да">
        <![CDATA[<a href ="]]></XSL:текст>
        <XSL:вредност на изберете="$ListUrlDir"/>
        <XSL:текст disable-излез-бегство="Да"><![CDATA[?FilterField1 =]]></XSL:текст>
        <XSL:вредност на изберете="$QueryFilterFieldName"/>
        <XSL:текст disable-излез-бегство="Да"><![CDATA[&FilterValue1 =]]></XSL:текст>
        <XSL:вредност на изберете="$QueryFilterFieldValue"/>
        <XSL:текст disable-излез-бегство="Да"><![CDATA[">]]></XSL:текст>
        <XSL:вредност на изберете="$BarDisplayLabel"/>
        <XSL:текст disable-излез-бегство="Да"><![CDATA[</на>]]></XSL:текст>

        <!-- На следната малку покажува некои броеви во формат: "(вкупно / % од вкупните)" -->
        (<XSL:вредност на изберете="$TotalItems"/> /

        <!-- Ова создава убаво проценти етикета за нас.  Благодарение, Мајкрософт! -->
        <XSL:повик-дефиниција име="percentformat">
          <XSL:со-Парам име="проценти" изберете="$BarPercent"/>
        </XSL:повик-дефиниција>)

      </td>

      <!-- Конечно, испуштаат <td> ознака за бар себе.-->
      <td>
        <маса ќелии:="0" пополнувањето="0" границата="0"
ширина="{коло($BarPercent * 100)+1}%">
          <tr bgcolor="црвена">
            <XSL:текст disable-излез-бегство="Да"><![CDATA[&nbsp;]]></XSL:текст>
          </tr>
        </маса>
      </td>
    </tr>

  </XSL:дефиниција>

  <!-- Тоа се зема директно од некои XSL го најдов во дефиниција МСП. -->
  <XSL:дефиниција име="percentformat">
    <XSL:престанат име="проценти"/>
    <XSL:изберете>
      <XSL:кога тест="формат-број($проценти, "#, # # 0%;-#,##0%")= 'На Nan">0%</XSL:кога>
      <XSL:во спротивно>
        <XSL:вредност на изберете="формат-број($проценти, "#, # # 0%;-#,##0%")" />
      </XSL:во спротивно>
    </XSL:изберете>
  </XSL:дефиниција>

</XSL:интерфејс>

Резултатите:

На XSL од горе генерира овој графикон:

сликата

Разбивка на основните податоци со кликнување на статусот кодот:

сликата

Склучување на мисли:

Ова може да се генерализира?

Ја сакам оваа графики концепт, 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, Ве молиме да направите белешка во коментари или е-мејл мене.

Вертикални графикони:

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, please let me know and I’ll gladly link to your blog 🙂

Мислам дека предизвикот со вертикална графикон е дека етикетите за графикон се потешко да се управува, но сигурно не е невозможно.

Поле Име Gotcha на:

Постојат најмалку две работи кои треба да внимавате со вашето поле имиња.

Прва, a field name with a space has to be escaped in the XSL. This will probably be an issue here:

        <XSL:променлива име="totalProposed" 
 изберете="смета(/dsQueryResponse / Редови / Row[нормализираат-простор(@ Статус) = 'Предлог "])" />

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

   <XSL:променлива име="totalProposed" 
 изберете="смета(/dsQueryResponse / Редови / Row[нормализираат-простор(@ Status_x0020_Code) = 'Предлог "])" />

Вториот, и јас сум малку нејасни на овој, but you also need to be on the alert for field name changes. If you name your field "Status Code" а потоа подоцна, 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" врски може да им помогне на дијагностицира и точни овој вид на проблем.

За таа боја:

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. На пример, if the percentage of "stalled" AFE е > 10% тогаш тоа покажува црвена, otherwise show it in black. Користат <XSL:изберете> да се оствари ова.

Други ресурси:

Среќен трансформирање!

<крај />

Да се ​​претплатите на мојот блог!

17 размислувања за "Креирај Бар графики во SharePoint”

  1. Крис Б

    Оваа страница речиси завршено задачата бев во потрага по.

    Имам група која сака да го искористи Истражување SharePoint листа да се создаде неделни анкета. Улов? Тие не сакаат да се види кодот… Или промена на системот во секое време тие испрати анкета (планирани за неделно ажурирање).

    Јас бев во можност да го поврзете на оваа Анкетата листа и да се создаде графиконот на првиот одговор колона. Она што не може да се предвиди иако се вредностите и етикети дека тие ќе треба движат напред. За да бидат работите уште полоши, тие можат да имаат повеќе или помалку одговорите на располагање секоја недела.

    Јас ќе гледам на друго место, само во случај, но има некој најде начин да се создаде редови и етикети базирана на бројот на достапни опции и динамично поставување на овие наместо тешко кодирање на очекуваните вредности?

    Одговори ↓
  2. Грег Laushine

    Благодарение Пол. Многу корисни. Благодарение на вашата работа, Јас бев во можност да го додадете графикон бар колона на постоечка DVWP (e.g. за задачи) многу лесно со само неколку линии на вашиот код.
    Во SharePoint Designer, Јас вметнува податоци поглед со насловот и % комплетна колони од задачата листа. Ја ставив на курсорот во една од ќелиите и со десен клик. Јас изберете вметнете колона на правото. Во кодот видите, Најдов <td> и го замени <XSL:текст елемент во внатрешноста на клетката со вашиот код:
    <маса ќелии: ="0" пополнувањето ="0" border ="0"
    width="{коло(@ PercentComplete * 100)+1}%">
    <tr style="background-color:red">
    <XSL:text disable-output-escaping="yes"><![CDATA[&nbsp;]]></XSL:текст>
    </tr>
    </маса>

    Note I changed the row color code from bgcolor="red" to style="background-color:црвена"
    Исто така,, беше во можност да изберете една од колоните во мојата листа (@ PercentComplete) in place of "$BarPercent"
    Greg

    Одговори ↓
  4. Волфганг
    Paul, Ви благодариме за оваа! Јас создаде точна копија на она што ти го направи и тоа функционира речиси совршен. 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;
    Треба да се стави http://schemas.microsoft.com/WebParts/v2/DataView/designer in quotes.
    Откако го коригира тоа што тој работи како шарм! Јас сега ќе се адаптира овој на мојата сопствена листа и статус, но јас сум сигурен дека тоа нема да биде тешко. (Јас ќе ја објавите на резултат)
    Ви благодариме повторно
    ~ Волна
    Одговори ↓
  5. Нема име
    прашање –
    Што ако во мојот графикон, Сакав променлива да не броиме само еден статус, но смета повеќе деца?
    Така, на пример, што ако имав —
    <XSL:variable name="RequestsInitialized"
    select="count(/dsQueryResponse / Редови / Row[нормализираат-простор(@ Статус)=’WIP’])" />
    –Работата е, 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?
    Благодарение!
    Одговори ↓
  6. Murty Srirangam
    Здраво Пол,
    Iam really this is really a great effort by you. Може да се молам објасни каде што би пост овој код. Имам креирано prjoect со четири нови датотеки. Тогаш може да се објасни во повеќе детали што треба да направам.
    Ви благодариме
    Murty
    Одговори ↓
  8. Ендрју Карингтон
    Hi, Јас се обидувам да го промените овој малку, така што тоа покажува графикот на задачи во задача листа против информации за корисникот. Тоа го користи колумна наречена @ AssignedTo кој е корисник на присуство колона. Може да се добие тоа да се прикаже Teh изречена HTML но не може да се добие тоа да се пресмета и прикажување на вредности.
    Сите идеи?
    Благодарение
    Andy
    Одговори ↓
  9. Patrik Лука напишал:
    Здраво Пол,
    голем пост!
    А прашање:
    Јас би сакал да ги филтрираат на две полиња, во исто време: како тоа може да се постигне?
    На пример, една од вашите променливи се нарекува totalStalled и филтри на @ Статус.
    Јас би сакал да се филтрира во исто време да го намали мојот број на вратени евиденција на друго поле.
    I already found how to make an ‘OR’, but I donnot manage to find the ‘AND’
    An ‘OR’ може да се постигне вака:
    <XSL:variable name="totalStalled" select="count(/dsQueryResponse / Редови / Row[нормализираат-простор(@ Статус) = ‘Stalled’] | /dsQueryResponse / Редови / Row[нормализираат-простор(@ Помошни Филтер Теренски) = ‘value’])" />
    Одговори ↓
  16. Френк

    I have a ‘Using Dashboards in SharePoint’ прашање. 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’ ако е можно. Една од главните точки е гледање во реално време тековната обемот на работа во рамките на објектот и буквално ја гледам промени нагоре и надолу (можеби ќе треба да кликнете “освежување”/F5).

    Ви благодариме однапред,

    Одговори ↓

Остави Одговори

Вашата е-маил адреса нема да бидат објавени. Задолжителни полиња се означени *