Przegląd:
(AKTUALIZACJA 12/04/07: Dodaje inny ciekawych zasobów na koniec z linkami do innego bloga, który rozwiązuje ten problem przez bardzo ciekawe składnika web part)
Ten wpis w blogu zawiera opis sposobu tworzenia wykresu słupkowego w SharePoint. To działa w środowiskach MOSS i WSS, jak to tylko zależy od składnika web part widok danych.
Ogólne podejście jest następujący:
- Tworzenie listy lub biblioteki dokumentów, która zawiera dane, które chcesz wykres.
- Miejsce biblioteki dokumentów związanych / niestandardowe listy na stronę i przekonwertować go do składnika web part widok danych (DVWP).
- Modyfikowanie DVWP XSL do generowania kodu HTML, który pokazuje jak wykres.
Scenariusza biznesowego / Instalator:
Stworzyłem listę niestandardową z standardowe kolumny tytulu i jedną dodatkową kolumnę, "Status". To modele (bardzo Upraszczając) "zezwolenie na koszt" scenariusz gdzie tytuł reprezentuje projekt i stan wartości z listy:
- Proponowane
- W procesie
- Utknęły w martwym punkcie
Celem jest stworzyć interaktywne poziomy wykres słupkowy, który pokazuje te kody stanu.
Ja mam wypełnione listy i wygląda to tak:
Tworzenie składnika Web Part Widok danych:
Utworzyć DVWP dodając niestandardowe listy do strony (stronie w moim przypadku) i postępuj zgodnie z instrukcjami tutaj (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!395.entry).
Oprócz tworzenia po prostu DVWP, Musimy także ustawić właściwość stronicowania na Pokaż wszystkie wiersze dostępne. Dla mnie, to coś jak to wygląda:
W tym momencie, Zawsze blisko, SPD i przeglądarki. Następnie ponownie otworzyć stronę za pomocą przeglądarki. Pozwala to uniknąć przypadkowo mucking: układ części na stronie sieci web.
Modyfikowanie XSLT:
Teraz nadszedł czas, aby zmodyfikować Przekształcenie XSLT.
Zawsze używaj programu visual studio do tego. (Zobacz tutaj dla ważna uwaga na temat intellisense, które pomogą Ci dużo).
Utworzyć pusty projekt dodać cztery nowe pliki (zastąpienie słowa "oryginał" i "nowy" w stosownych przypadkach):
- Original.XSLT
- New.XSLT
- Oryginalny Params.xml
- Nowy Params.xml
W moim przypadku, wygląda to:
Modyfikowanie składnika web part i skopiować parametry i XSL do oryginału"" wersji programu Visual Studio.
Celem jest przyczyną XSL do przekształcenia wyników, jakie uzyskujemy z kwerendy DVWP na format HTML, który jest renderowany jako wykres.
W tym celu, pomaga to najpierw rozważyć, jak powinny wyglądać HTML przed my gubi się w obłęd, który jest znany jako "XSL". (Żeby było jasne, Poniżej jest po prostu przykład; nie go wpisać lub skopiować i wkleić do programu visual studio. Wystawiam pełna cios punkt wyjścia do tego później w Recenzja). Poniższy przykładowy wykres jest renderowany na kod HTML bezpośrednio po:
Odpowiedni HTML:
<HTML> <organ> <centrum> <szerokość tabeli = 80%> <TR><TD><centrum>Wykres słupkowy poziomy</TD></TR> <TR> <TD align = "center"> <obramowanie tabeli = "1" szerokość = 80%> <TR> <szerokosci TD = 10%>Otwarte</TD> <TD><tabela cellpadding ="0" cellspacing ="0" border = 0 szerokość = 50%><TR bgcolor = czerwony><TD> </TD></TR></Tabela></TD> </TR> <TR> <szerokosci TD = 10%>Zamknięte</TD> <TD><tabela cellpadding ="0" cellspacing ="0" border = 0 szerokość = 25%><TR bgcolor = czerwony><TD> </TD></TR></Tabela></TD> </TR> <TR> <szerokosci TD = 10%>Utknęły w martwym punkcie</TD> <TD><tabela cellpadding ="0" cellspacing ="0" border = 0 szerokość = 25%><TR bgcolor = czerwony><TD> </TD></TR></Tabela></TD> </TR> </Tabela> </TD> </TR> </Tabela> </organ> </HTML> |
Kiedyś martwe proste podejście do tworzenia mojego barów ustawiając kolor tła wiersza "czerwony".
To jest tutaj na wynos: W końcu, wszystko co robimy jest stworzenie HTML z wierszy i kolumn.
Szablonów XSLT:
Już skopiowane XSLT, który generuje wykres słupkowy poziomy. Jest to dość dobrze skomentował tak nie wiele tutaj dodać oprócz tych notatek:
- Zacząłem z domyślny plik XSL, że SharePoint Designer dał mi, kiedy po raz pierwszy stworzyłem DVWP.
- Udało mi się zmniejszyć to z SPD 657 linie do 166 linie.
- Nie poeksperymentować z pliku XML parametry (które jest oddzielone od XSL i będziesz wiedzieć, co mam na myśli, gdy idziesz do modyfikowania DVWP, sam; Istnieją dwa pliki, które można modyfikować). Jednakże, w celu uproszczenia, Usunąć prawie wszystkie z nich z XSL. Oznacza to, że jeśli chcesz korzystać z tych parametrów, Wystarczy dodać swoje definicje zmiennych XSL. To będzie łatwe, ponieważ masz oryginalny definicje zmiennych XSL w sieci visual studio projekt.
- Powinieneś być w stanie skopiować i wkleić to bezpośrednio do sieci visual studio projekt. Następnie, usunąć moje rozmowy i wstawić własne wzywa do "ShowBar".
- Drąż niedziałający działa poprzez tworzenie <href> Jak to: http://server/List?FilterField1=fieldname&FilterValue1=actualFilterValue. Technika ta może być wartości w innych kontekstach. Na początku, Myślałem, że będą musiały zgodne z formatem bardziej złożonych: http://server/List/AllItems.aspx?View={guid}&FilterField1=blah&FilterValue1=blah, ale w moim otoczeniu nie jest konieczne. Listę URL jest przekazywana do nas przez program SharePoint, więc jest to dość łatwe do upowszechnienia.
Tutaj jest:
<XSL:arkusz stylów Wersja="1.0" Wyklucz wynik przedrostki="r z o s ddwrt dt msxsl" |
Wyniki:
XSL z góry generuje ten wykres:
Drąż do danych źródłowych klikając na kod stanu:
Zawarcia myśli:
Może to być uogólnione?
Kocham tę koncepcję Jave, ale nienawidzę fakt, że musiał iść i zrobić tyle kodowanie strony. Dałam trochę myśli czy to mogą być uogólnione i jestem optymistą, ale ja też jestem trochę straszne, że może być gdzieś na drodze, że nie oferują żadnych obejść mur z cegły. Jeśli ktoś ma jakieś dobre pomysły na ten temat, Proszę zanotować w komentarzach lub e-mail ja.
Wykresy pionowe:
Jest to wykres słupkowy poziomy. To z pewnością można utworzyć wykres pionowe. Musimy tylko zmienić kod HTML. Chciałbym zacząć się tak samo: Utworzenie obrazu HTML wykres słupkowy pionowe i następnie dowiedzieć się, jak uzyskać za pośrednictwem XSL. Jeśli ktoś jest zainteresowany w tym, I może być pewien wobec próbować ono na zewnątrz i wypracować załamań. Jeśli ktoś to już zrobił, proszę dać mi znać, a ja chętnie odwołują się do swojego bloga 🙂
Myślę, że to wyzwanie z pionowej wykresu, że etykiety wykresu są trudniejsze do zarządzania, ale na pewno nie da.
Pole Nazwa haczyka:
Istnieją co najmniej dwie rzeczy zwrócić uwagę z nazwy pola.
Pierwszy, Nazwa pola z miejsca ma być uciekł w XSL. Prawdopodobnie będzie to problem tutaj:
<XSL:Zmienna Nazwa="totalProposed"
Wybierz="Hrabia(/dsQueryResponse/wierszy/wiersz[miejsca na normalizacji(@Status) = "Proponowane"])" />
Jeśli stan"" kolumna jest rzeczywiście o nazwie "kod stanu" następnie trzeba odwoływać się do niej jako "Status_x0020_Code":
<XSL:Zmienna Nazwa="totalProposed"
Wybierz="Hrabia(/dsQueryResponse/wierszy/wiersz[miejsca na normalizacji(@Status_x0020_Code) = "Proponowane"])" />Drugi, a ja jestem nieco rozmyte na to, ale też trzeba mieć się na baczności dla zmiany nazwy pola. Jeśli nazwa pola "kod stanu" a potem na, Zmień jego nazwę na "AFE Status", Nazwa wewnętrzna"" nie zmienia. Nazwa wewnętrzna nadal będzie "kod stanu" i musi odwoływać się jako "Status_x0020_Code". "Inne środki pieniężne" linki mogą pomóc zdiagnozować i rozwiązać taki problem.
O tym kolorze:
Wybrałem "czerwony" bo to miłe dla mnie w tej chwili. Nie byłoby wielkiego aby pokazać różne kolory tak, aby dostarczyć więcej niż tylko wizualny opis kilku, ale również zapewnić użyteczne KPI. Na przykład, Jeśli procent "utknęły w martwym punkcie" AFE w jest > 10% następnie Pokaż czerwony, w przeciwnym razie pokazać go w kolorze czarnym. Wykorzystanie <XSL:Wybierz> Aby to osiągnąć.
Inne zasoby:
- Określić nazwę wewnętrznej (i inne dobre info) dane z listy: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!134.entry
- Pokaż wszystkie dane programu SharePoint (surowy kod XML): http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!190.entry
- Uzyskać kolumna określonego wyrażenie XPATH: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!155.entry
- Inne podejście przy użyciu programu OWA(?). Nie mają wykopał go, ale wygląda obiecująco, szczególnie w przypadku wykresów kołowych: http://www.waka.dk/Blog/PermaLink,guid,e2532e71-d774-4ac9-8f25-883964b830f4.aspx
Przekształcenie szczęśliwy!
<koniec />