Креирање Грапхс Бар у СхареПоинт

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. Поставите повезане библиотеку докумената / прилагођене листе на страници и претворити га у део података видели Веб (ДВВП).
  3. Измените ДВВП КССЛ да генерише ХТМЛ који приказује као графикон.

Пословни сценарио / Намештаљка:

Ја сам створио прилагођене листе са стандардним наслова колоне и још једну колону, "Status". This models (Веома упрошћено) an "Authorization For Expense" сценарио где наслов представља пројекат и статус вредности са листе:

  • Предложена
  • У процесу
  • Застоју

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

Су насељена сам листу и то изгледа овако:

слика

Креирање података Парт видели Веб:

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

Поред једноставно креирање ДВВП, 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.

Измените КССЛТ:

Сада је време да се мења КССЛТ.

I always use visual studio for this. (Видети овде за Важна напомена о ИнтеллиСенсе који ће вам помоћи да много).

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

  • Оригинал.кслт
  • Нев.кслт
  • Оригинални Парамс.кмл
  • Нови Парамс.кмл

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

слика

Modify the web part and copy the params and XSL to the "Original" Верзија за Висуал Студио.

Циљ је да се изазову КССЛ трансформације резултата се вратимо из ДВВП упита у ХТМЛ који чини као графикону.

У том циљу, 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

Одговарајући ХТМЛ:

<ХТМЛ>
<тело>
<центар>
<Ширина стола = 80%>
<тр><тд><центар>Хоризонтална бар грапх</тд></тр>
<тр>
<td align="center">
<table border="1" видтх = 80%>
<тр>
<тд видтх = 10%>Отворено</тд>
<тд><Табела целлпаддинг ="0" бордер ="0" бордер = 0 видтх = 50%><тр бгцолор = црвена><тд>&нбсп;</тд></тр></табела></тд>
</тр>
<тр>
<тд видтх = 10%>Затворено</тд>
<тд><Табела целлпаддинг ="0" бордер ="0" бордер = 0 видтх = 25%><тр бгцолор = црвена><тд>&нбсп;</тд></тр></табела></тд>
</тр>
<тр>
<тд видтх = 10%>Застоју</тд>
<тд><Табела целлпаддинг ="0" бордер ="0" бордер = 0 видтх = 25%><тр бгцолор = црвена><тд>&нбсп;</тд></тр></табела></тд>
</тр>
</табела>
</тд>
</тр>
</табела>
</тело>
</ХТМЛ>

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

Понијети овде је ово: На крају, сви ми радимо је стварање ХТМЛ са редовима и колонама.

Шаблон КССЛТ:

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:

  • Почео сам са подразумеваним КССЛ СхареПоинт Десигнер који ми је дао када сам креирао ДВВП.
  • Био сам у стању да смањи ово доле из СПД 657 линије до 166 lines.
  • Нисам се зезају са параметрима КСМЛ датотеке (која је одвојена од КССЛ а ви ћете знати шта мислим када одете да измените ДВВП себе; постоје две датотеке можете да измените). Међутим, да би га поједноставио, 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".
  • Дрилл довн ради стварањем <хреф> овако: 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.

Овде је:

<клс:стиловима верзија="1.0" искључују-резултат-префикси="рс З О с ддврт ДТ мсксл" 
 КСМЛнс:мсксл="урна:шеме-мицрософт-цом:КССЛТ" КСМЛнс:клс="хттп://ввв.в3.орг/1999/КССЛ/Трансформ" 
 КСМЛнс:СхареПоинт="Мицрософт.СхареПоинт.ВебЦонтролс" КСМЛнс:__десигнер="хттп://сцхемас.мицрософт.цом/ВебПартс/в2/ДатаВиев/десигнер" 
 КСМЛнс:аспида="хттп://сцхемас.мицрософт.цом/АСПНЕТ/20" КСМЛнс:ддврт="хттп://сцхемас.мицрософт.цом/ВебПартс/в2/ДатаВиев/рунтиме" 
 КСМЛнс:О="урна:шеме-мицрософт-цом:канцеларија" КСМЛнс:с="УУИД:БДЦ6Е3Ф0-6ДА3-11Д1-А2А3-00АА00Ц14882" 
 КСМЛнс:ДТ="УУИД:Ц2Ф41010-65Б3-11Д1-А29Ф-00АА00Ц14882" КСМЛнс:РС="урна:шеме-мицрософт-цом:РовСет" КСМЛнс:З="#РовсетСцхема" 
 КСМЛнс:ддврт2="урна:фронтпаге:унутрашњи">
  <клс:излаз метод="ХТМЛ" увући="не" />
  <клс:Децимално формату НаН="" />
  <клс:парам име="ЛистУрлДир"></клс:парам> <!-- Морам ово да подржи дрилл-доле.  -->

  <клс:шаблон меч="/" КСМЛнс:СхареПоинт="Мицрософт.СхареПоинт.ВебЦонтролс" 
 КСМЛнс:__десигнер=http://schemas.microsoft.com/WebParts/v2/DataView/designer КСМЛнс:аспида="хттп://сцхемас.мицрософт.цом/АСПНЕТ/20">
    <клс:варијабла име="двт_СтилеНаме">Табела</клс:варијабла>
    <клс:варијабла име="Редови" изабрати="/дсКуериРеспонсе / редове / Ров" />
    <клс:варијабла име="двт_РовЦоунт" изабрати="рачунати($Редови)" />
    <клс:варијабла име="ИсЕмпти" изабрати="$двт_РовЦоунт = 0" />
    <клс:варијабла име="двт_ИсЕмпти" изабрати="$двт_РовЦоунт = 0" />

    <клс:изабрати>
      <клс:када тест="$двт_ИсЕмпти">
        Нема података на графикону!<БР/>
      </клс:када>
      <клс:иначе>

        <!--
          Интересантне ствари почиње овде.

          Морамо да дефинишемо пар променљивих за сваки ред у графикону: укупан број
          .
        -->
        <клс:варијабла име="тоталПропосед" изабрати="рачунати(/дсКуериРеспонсе / редове / Ров[нормализује-простор(@ Статус) = 'Предлог'])" />
        <клс:варијабла име="перцентПропосед" изабрати="$тоталПропосед див $ двт_РовЦоунт" />

        <клс:варијабла име="тоталИнПроцесс" изабрати="рачунати(/дсКуериРеспонсе / редове / Ров[нормализује-простор(@ Статус) = "У процесу"])" />
        <клс:варијабла име="перцентИнПроцесс" изабрати="$тоталИнПроцесс див $ двт_РовЦоунт" />

        <клс:варијабла име="тоталСталлед" изабрати="рачунати(/дсКуериРеспонсе / редове / Ров[нормализује-простор(@ Статус) = 'Сталлед'])" />
        <клс:варијабла име="перцентСталлед" изабрати="$тоталСталлед див $ двт_РовЦоунт" />

        <!--
          Ми смо овде дефинишемо нашу ХТМЛ табелу.  Ја сам позајмљивање из неких стандарда
          .  Мислим да ће поштовати
          .
        -->
        <табела ширина="100%" бордер="0" целлпаддинг="2"
стил="бордер-ригхт: 1 солид # Ц0Ц0Ц0; бордер-боттом: 1 солид # Ц0Ц0Ц0; бордер-лефт-стилу: солидан; бордер-лефт-ширина: 1; бордер-топ-стилу: солидан; бордер-топ-ширина: 1;">

           <тр>
            <тд алигн="центар">
              <табела граница="1" ширина="100%">

                <!--
                  За сваки статус који желимо да графикон, we call the "ShowBar" шаблон.
                  Ми смо га проћи:
                  1. Ознака за ред.  Ово се претвара у хипервезу.
                  2. Посто (променљива одозго).
                  3. Теренски име код са основне листе.  Ово
                     .
                  4. Поље за упарен #3.
                  5. Укупно ставки овог статуса код (није велика сума свих
                     ).

                  Емитује <тр></тр> и хоризонтална трака Линија.

                  Позивамо овај шаблон за сваки статус код желимо да видите.
                -->
                <клс:позива шаблон име="СховБар">
                  <клс:са парам- име="БарДисплаиЛабел" изабрати=""Предложени '"/>
                  <клс:са парам- име="БарПерцент" изабрати="$перцентПропосед"/>
                  <клс:са парам- име="КуериФилтерФиелдНаме" изабрати="'Статус'"/>
                  <клс:са парам- име="КуериФилтерФиелдВалуе" изабрати=""Предложени '"/>
                  <клс:са парам- име="ТоталИтемс" изабрати="$тоталПропосед"></клс:са парам->
                </клс:позива шаблон>

                <клс:позива шаблон име="СховБар">
                  <клс:са парам- име="БарДисплаиЛабел" изабрати="'Сталлед'"/>
                  <клс:са парам- име="БарПерцент" изабрати="$перцентСталлед"/>
                  <клс:са парам- име="КуериФилтерФиелдНаме" изабрати="'Статус'"/>
                  <клс:са парам- име="КуериФилтерФиелдВалуе" изабрати="'Сталлед'"/>
                  <клс:са парам- име="ТоталИтемс" изабрати="$тоталСталлед"></клс:са парам->
                </клс:позива шаблон>

                <клс:позива шаблон име="СховБар">
                  <клс:са парам- име="БарДисплаиЛабел" изабрати=""У процесу""/>
                  <клс:са парам- име="БарПерцент" изабрати="$перцентИнПроцесс"/>
                  <клс:са парам- име="КуериФилтерФиелдНаме" изабрати="'Статус'"/>
                  <клс:са парам- име="КуериФилтерФиелдВалуе" изабрати=""У процесу""/>
                  <клс:са парам- име="ТоталИтемс" изабрати="$тоталИнПроцесс"></клс:са парам->
                </клс:позива шаблон>

              </табела>
            </тд>
          </тр>
        </табела>
      </клс:иначе>
    </клс:изабрати>
  </клс:шаблон>

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

    Вероватно ћете урадити већину свог дотеривања овде.
  -->
  <клс:шаблон име="СховБар">
    <клс:парам име="БарДисплаиЛабел" /> <!-- ознака за приказивање -->
    <клс:парам име="БарПерцент"/> <!-- Проценат од укупног броја. -->
    <клс:парам име="КуериФилтерФиелдНаме"/> <!-- Користи се за скок у упит & филтрирате -->
    <клс:парам име="КуериФилтерФиелдВалуе"/> <!-- Користи се за скок у упит & филтрирате -->
    <клс:парам име="ТоталИтемс" /> <!-- укупан број овог барлабел -->

    <тр>

      <!-- Сама трака ознака. -->
      <тд класа="МС-формбоди" ширина="30%">

        <!--
          Овај следећи скуп исказа гради упита који омогућава
          .
          Ми се овде користи неколико ствари:
          1. Можемо проћи ФилтерФиелд1 и ФилтерВалуе1 у листу за филтрирање на колону.
          2. СхареПоинт пролази кључни параметар за нас, ListUrlDir that points to
             the underlying list against which this DVWP is "running".

          Зар није забавно КССЛ?
        -->
        <клс:текст дисабле-излаз-беже="да">
        <![ЦДАТА[<хреф ="]]></клс:текст>
        <клс:вредности од изабрати="$ЛистУрлДир"/>
        <клс:текст дисабле-излаз-беже="да"><![ЦДАТА[?ФилтерФиелд1 =]]></клс:текст>
        <клс:вредности од изабрати="$КуериФилтерФиелдНаме"/>
        <клс:текст дисабле-излаз-беже="да"><![ЦДАТА[&ФилтерВалуе1 =]]></клс:текст>
        <клс:вредности од изабрати="$КуериФилтерФиелдВалуе"/>
        <клс:текст дисабле-излаз-беже="да"><![ЦДАТА[">]]></клс:текст>
        <клс:вредности од изабрати="$БарДисплаиЛабел"/>
        <клс:текст дисабле-излаз-беже="да"><![ЦДАТА[</a>]]></клс:текст>

        <!-- Следећи део показује неке бројеве у формату: "(укупан / % од укупног броја)" -->
        (<клс:вредности од изабрати="$ТоталИтемс"/> /

        <!-- То ствара леп одсто ознаку за нас.  Хвала, Мицрософт! -->
        <клс:позива шаблон име="перцентформат">
          <клс:са парам- име="проценат" изабрати="$БарПерцент"/>
        </клс:позива шаблон>)

      </тд>

      <!-- Коначно, емитују <тд> ознака за сам бар.-->
      <тд>
        <табела целлпаддинг="0" бордер="0" граница="0"
ширина="{заокружити($БарПерцент * 100)+1}%">
          <тр бгцолор="црвен">
            <клс:текст дисабле-излаз-беже="да"><![ЦДАТА[&нбсп;]]></клс:текст>
          </тр>
        </табела>
      </тд>
    </тр>

  </клс:шаблон>

  <!-- Ово је директно преузет из неког КССЛ сам нашао у МС шаблону. -->
  <клс:шаблон име="перцентформат">
    <клс:парам име="проценат"/>
    <клс:изабрати>
      <клс:када тест="формат-број($проценат, "#, # # 0%;-#,##0%')= 'НаН'">0%</клс:када>
      <клс:иначе>
        <клс:вредности од изабрати="формат-број($проценат, "#, # # 0%;-#,##0%')" />
      </клс:иначе>
    </клс:изабрати>
  </клс:шаблон>

</клс:стиловима>

Резултати:

КССЛ одозго генерише овај графикон:

слика

Дрилл до основних података кликом на статусној коду:

слика

Закључна разматрања:

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

Волим овај концепт градите, 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 🙂

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

Поље Име је Готцха:

Постоје најмање две ствари треба обратити пажњу са називима поља.

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

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

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

   <клс:варијабла име="тоталПропосед" 
 изабрати="рачунати(/дсКуериРеспонсе / редове / Ров[нормализује-простор(@ Статус_к0020_Цоде) = 'Предлог'])" />

Други, и ја сам мало нејасно ово, 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" АФЕ је > 10% затим га покаже црвени, otherwise show it in black. Коришћење <клс:изабрати> ово постићи.

Остали ресурси:

Срећан претварајући!

<крај />

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

17 мисли о "Креирање Грапхс Бар у СхареПоинт”

  1. Крис Б

    Ова страница скоро завршио задатак сам тражио.

    Имам групу која жели да користи СхареПоинт листу, да креирате анкету недељни анкету. Улов? Они не желе да виде код… Или променити систем сваки пут када су послали анкету (планирана за недељни упдате).

    Био сам у стању да се повеже то у анкети листа и створити графикон на први одговор колону. Оно што ја не могу предвидети, иако су вредности и налепнице које ће им бити потребне креће напред. Да ствар буде гора они могу имати више или мање одговора на располагању сваке недеље.

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

    Одговор ↓
  2. Грег Лаусхине

    Хвала Павле. Веома корисно. Захваљујући вашем раду, Био сам у стању да додате колону график бар на постојећем ДВВП (e.g. за задатке) врло лако са само неколико линија кода вашег.
    У СхареПоинт Десигнер, Ја убаци података поглед са насловом и % комплетне колоне из листе задатака. Сам ставио курсор на једну од ћелија и десни клик. Ја изаберите убаците колону десно. У приказу шифра, Нашао сам <тд> и заменио <клс:Текст елеменат унутар ћелије са кодом:
    <Табела целлпаддинг ="0" бордер ="0" бордер ="0"
    width="{заокружити(@ ПерцентЦомплете * 100)+1}%">
    <tr style="background-color:red">
    <клс:text disable-output-escaping="yes"><![ЦДАТА[&нбсп;]]></клс:текст>
    </тр>
    </табела>

    Note I changed the row color code from bgcolor="red" to style="background-color:црвен"
    Такође, био у могућности да изаберете једну од колона у мој списак (@ ПерцентЦомплете) in place of "$BarPercent"
    Грег

    Одговор ↓
  4. Волфганг
    Павле, хвала за ово! Креирао сам тачну копију онога што си урадио и то ради скоро савршено. There was one tiny issue in row the 2nd paragraph of your code:
    <клс:template match="/" КСМЛнс:SharePoint="Microsoft.SharePoint.WebControls"
    КСМЛнс:__десигнер =http://schemas.microsoft.com/WebParts/v2/DataView/designer КСМЛнс:АСП ="http://schemas.microsoft.com/ASPNET/20"&gt;
    Треба да се стави http://schemas.microsoft.com/WebParts/v2/DataView/designer in quotes.
    Након што сам исправио да ради као шарм! Сада ће се прилагодити то на моју листу и статус, али сам сигуран да неће бити тешко да се. (Ја ћу објавити резултат)
    Хвала још једном
    ~ Волле
    Одговор ↓
  5. Но наме
    питање –
    Шта ако у графикону, Желео сам да променљиву не само бројати једног статуса, али оне броје више?
    Тако, на пример, шта ако сам имао —
    <клс:variable name="RequestsInitialized"
    select="count(/дсКуериРеспонсе / редове / Ров[нормализује-простор(@ Статус)=’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. Мурти Срирангам
    Здраво Павле,
    Iam really this is really a great effort by you. Да ли можете да нам објасните где бих ја после овај код. Ја сам створио прјоецт са четири нова датотека. Тада можете објаснити детаљније шта треба да урадим.
    Хвала
    Мурти
    Одговор ↓
  8. Ендру Карингтон
    Ћао, Трудим се да то мало модификовати тако да се приказује графикон задатака у листи задатака против корисничких информација. Користи колону под називом @ АссигнедТо који је корисник присуство колона. Ја могу да га прикаже тех доноси ХТМЛ, али не могу добити то за израчунавање и приказ вредности.
    Било који идеја?
    Хвала
    Енди
    Одговор ↓
  9. Патрик Луца вроте:
    Здраво Павле,
    велики пост!
    Питање:
    Желео бих да филтрирате по два поља у исто време: како се то може постићи?
    На пример, један од ваших променљивих се назива тоталСталлед и филтрира на @ статусу.
    Ја бих да филтрирате у исто време да смањим број враћених записа на другом пољу.
    I already found how to make an ‘OR’, but I donnot manage to find the ‘AND’
    An ‘OR’ може постићи овако:
    <клс:variable name="totalStalled" select="count(/дсКуериРеспонсе / редове / Ров[нормализује-простор(@ Статус) = ‘Stalled’] | /дсКуериРеспонсе / редове / Ров[нормализује-простор(@ ЕктраФилтерФиелд) = ‘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’ if possible. One of the main points is viewing the real-time current workload within the facility and literally watch it change up and down (may have to click “refresh”/F5).

    Thank you in advance,

    Одговор ↓

Леаве а Репли

Ваша емаил адреса неће бити објављена. Обавезна поља су означена *