Rozszerzenie:Wykres
Graph Status wydania: stabilne |
|
---|---|
Realizacja | Tag , ContentHandler |
Opis | Wykresy tworzone przez dane |
Autor(zy) | Yuri Astrakhan (Yurik dyskusja), Dan Andreescu, Frédéric Bolduc |
Licencja | MIT License |
Pobieranie | |
|
|
Przetłumacz rozszerzenie Graph jeżeli jest dostępne na translatewiki.net | |
Problemy | Otwarte zadania · Zgłoś błąd |
Rozszerzenie Graph za pomocą tagu <graph>
umożliwia opisywanie wizualizacji danych takich jak wykresy słupkowe, wykresy kołowe, przebiegi czasowe i histogramy (demo) w formacie JSON który rysuje wykresy oparte o Vega.
Informacje ogólne
Rozszerzenie Graph pozwala na dodanie do stron wiki rewelacyjnych wykresów opartych o Vega. Wykresy mogą być statyczne i dynamiczne.
Najłatwiejszy sposób na dodanie wykresy jest użycie gotowego szablonu takiego jak {{Graph:Chart}}. Ten szablon ukrywa wszelkie komplikacje składni Vega. Zaawansowani użytkownicy mogą użyć Brudnopisu Wykresu do opracowania wykresów. Brudnopis Wykresu zezwala łącznie ze składnią JSON na składnię szablonu wiki.
Przydatne linki
- Dokumentacja Vega 2 - przywrócone strony dokumentacji Vega 2.
- Przewodnik - Ogólne zalecenia jak używać wykresów w Wiki.
- Interaktywny Samouczek - instrukcje krok po kroku jak od zera tworzyć złożone interaktywne wykresy
- Strona demonstracyjna - wiele przykładów i sztuczek
- nagranie TechTalk - wykład techniczny WMF omawiający rozszerzenie Graph, łącznie ze świetną demonstracją editora Lyra I(także zainstalowanego na na labs).
- Możesz też być zainteresowany przyszłymi możliwościami Vega (program Jeffrey Heer).
- Vega for devs - najlepsze miejsce z zasobami dotyczącymi Vega
- Migracja do Vega 2.0
- Film z prowadzeniem do interaktywnej Vegi
Instalacja
- Jeżeli korzystasz z Vagrant , zainstaluj poprzez
vagrant roles enable graph --provision
- Ręczna instalacja
- Wymagane rozszerzenie JsonConfig
- Pobierz i umieść plik(i) w katalogu o nazwie
Graph
w swoim kataloguextensions/
. - Dodaj poniższy kod na dole swojego pliku LocalSettings.php:
wfLoadExtension( 'Graph' );
- Zrobione – Przejdź do Special:Version na swojej wiki, aby sprawdzić czy rozszerzenie zostało pomyślnie zainstalowane.
Dodatkowe ustawienia konfiguracji
Jeżeli chcesz zreplikować środowisko produkcyjne jak en.wiki będziesz musiał postąpić według poniższych kroków:
Role
- Uaktywnij rolę graphs
- Uaktywnij rolę scribunto
- Uaktywnij rolę imagemap
Szablon i moduły Lua
- Skopiuj Module:Graph lokalnie
- Skopiuj Module:Graph/doc lokalnie
- Skopiuj Template:Nowrap lokalnie
- Skopiuj Module:Chart lokalnie
- Skopiuj Module:Chart/Default_colors lokalnie.
- Skopiuj File:Circle_frame.svg lokalnie
Przykłady wykresów
Sprawdź Stronę demonstracyjną z wieloma przykładami i sztuczkami.
Rezerwa zdefiniowana przez użytkownika
Kiedy używane jest renderowanie po stronie klienta jest możliwość użycia Wikimedia Commons do zapewnienia statycznego obrazu rezerwowego dla użytkowników noscript
.
Jest to tymczasowe rozwiązanie dopóki nie będzie wprowadzona nowa usługa renderowania po stronie serwera zastępująca wyłączaną usługę Graphoid.
Użytkownik musi najpierw przesłać statyczny wykres do Wikimedia Commons.
Rezerwowe obrazy mają dwie zmienne fallback
i fallbackWidth
.
fallback
odnosi się do nazwy pliku Wikimedia Commons.
fallbackWidth
jest szerokością rezerwowego obrazu w pikselach.
Te zmienne są wprowadzanie przez wykres w następujący sposób:
<graph fallback="Graph test seddon.png" fallbackWidth=450>
Tam gdzie są używane moduły Lua takie jak Module:Graph zmienne te mogą być wprowadzone przez funkcję tag. Jeżeli Template:Graph:Chart są dostosowane, powinny wyglądać następująco:
{{safesubst:#tag:graph|{{safesubst:#invoke:Graph|chartWrapper}} | fallback = {{{fallback|''}}} | fallbackWidth= {{{fallbackWidth|''}}} }}
Będzie to zastosowane w szablonie w następujący sposób:
{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y
|type=rect|x=1,2,3,4,5,6,7,8|y=10,12,6,14,2,10,7,9|fallback=Graph test seddon.png|fallbackWidth=450}}
Jeżeli fallbackWidth nie będzie podana a obraz będzie zdefiniowany rozszerzenie wyznaczy szerokość z podanej szerokości wykresu. Powodem są częste różnice w wyświetlanej szerokości obrazu i rzeczywistej szerokości obrazu.
{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y
|type=rect|x=1,2,3,4,5,6,7,8|y=10,12,6,14,2,10,7,9|fallback=Graph test seddon.png}}
Dane zewnętrzne
Protokoły HTTP(S) nie mogą być użyte do uzyskania danych dla wykresu.
Zamiast tego, użyj jednego ze specjalnych protokołów wiki jak wikiraw:
, wikiapi:
i innych.
Usługa Graphoid i rozszeżenie Graph używa ustawień GraphAllowedDomains
to kontroli jak są rozwiązywane te protokoły:
Note that because queries rely on the structure of wikibase items, they may suddenly stop working if the underlying data is edited and changes, as it may yield incomplete, empty or invalid data that can't be used to create a graph. In these cases the graph will end up empty (see phab:T168601).
$wgGraphAllowedDomains = [
# lista wszystkich domen http + https dopuszczonych do dostępu do zewnętrznych danych.
# Wszystkie wypisane tu domeny automatycznie zezwalają też na wszystkie poddomeny.
# Specjalne protokoły jak "wikiraw" używają jej do określenia których protokołów użyć.
# W ten sposób wikiraw://en.wikipedia.org/Page będzie zapytaniem API do https://en.wikipedia.org/w/api.php?action=query&titles=Page&...
'https' => [ 'wikipedia.org', 'wikimedia.org', ... ],
'http' => [ 'wmflabs.org', ... ],
# lista domen dopuszczonych dla dostępu przez protokół wikirawupload:.
# Tylko dokładne dopasowanie, bez poddomen.
'wikirawupload' => [ 'upload.wikimedia.org' ],
# takie same jak wikirawupload ale dla zapytań Wikidata Sparql
'wikidatasparql' => [ 'query.wikidata.org' ],
];
Znane błędy i ograniczenia
- błędy rozszerzenia Graph
- błędy usługi Graphoid
- Nie udana implementacja skal czasowych ISO 8601 więc tylko kalendarz Gregoriański może być użyty w wykresach czasowych
- Powiększanie obrazów w większości przeglądarek może być domyślnie rozmyte. Ustaw odpowiednią wartość image-rendering aby naprawić.
Wnętrze
Podczas parsowania, rozszerzenie Graph rozwija wszystkie parametry/wyrażenia szablonów i przechowuje kompletne definicje w właściwości strony graph_specs
używając ID haszów wykresów.
Oznacza to, że możesz łatwo zlokalizować wykresy za pomocą Special:PageWithProps lub akcji API
Rozszerzenie wykresu dodaje HTML do strony tam gdzie powinien znaleźć się wykres: <div>
zawierający tag <img>
.
Przykład:
<div class="mw-wiki-graph-container">
<img class="mw-wiki-graph-img"
src="/api/rest_v1/page/graph/png/Extension%3AGraph%2FDemo/1686336/d243aa924db2f82926e0f317217fcce591fe8cd4.png" />
</div>
Atrybut tagu <img>
href
wskazuje do usługi #Graphoid, która usdostępnia statyczny obraz wykresu.
Jeżeli rozszerzenie Graph jest skonfigurowane z interaktywnością, przeglądarka klienta ma włączoną obsługę JavaScript oraz przeglądarka nie jest przestarzała w której, ResourceLoader nie obsługuje JavaScript wtedy przeglądarka klienta będzie generować wykres na bieżąco.
Rozszerzenie Graph dodaje moduł ext.graph
ResourceLoader JavaScript do strony łącznie z biblioteką Vega i wstawia definicję wykresu JSON do kodu JavaScript mediaWiki.config
w zmiennej o nazwie wgGraphSpecs
.
Kiedy klient wczyta moduł, biblioteka JavaScript Vegi zapełni każdy <div>
go płótnem HTML i narysuje wykres na nim zamieniając statyczny obraz.
Stan na listopad 2015, wiki Wikimedii zezwalają na interaktywne renderowanie tylko w podglądzie edycji.
Możesz skonfigurować rozszerzenie Graph aby zawsze używało samego tagu <img>
i nie dodawało bibliotek Vega lub definicji JSON.
Ten tryb nie będzie działał podczas edycji, ponieważ page_props
nie jest aktualizowany po zapisaniu.
Po zapisaniu usługa Graphoid będzie miała dostęp do nowej definicji wykresu poprzez akcję API.
Kwestie bezpieczeństwa
<graph>
może być skonfigurowany aby zabronić odniesień do niezaufanych źródeł danych (np. Wikimedia zezwala tylko na dane ze strony Wikimedii)
Może też przesyłać dodatkowe nagłówki wtedy gdy ma dostęp do zewnętrznych danych, np. nagłówek Treat-as-Untrusted
który MediaWiki używa aby zapobiec atakom CSRF.
Licencja
Vega jest dystrybuowana pod zmodyfikowaną licencją BSD akceptową do użytku dla nas.
“ | Wygląda on na kopię licencji BSD z pewnymi małymi (akceptowalnymi) modyfikacjami. To nie jest dla nas problem aby jej użyć, aczkolwiek idealnie było by gdyby nie wprowadzaliby takich zmian do licencji. Lepiej jest jak nie są wprowadzane takie zmiany do licencji, aby zamieszania (takiego jak to) w temacie czy licencja jest bezpieczna do użytku otwarto-źródłowego. | ” |
—Stephen LaPorte |
Konfiguracja
wgGraphIsTrusted
Jeżeli false
(domyślnie), dopuszcza nagłówek Treat-as-Untrusted:1 dla wszystkich zapytań danych
wgGraphImgServiceUrl
Ciąg formatujący aby utworzyć URL zapytanie usługi backend dla tagu <img>. Na przykład:
$wgGraphImgServiceUrl = "//graphoid.wikimedia.org/%1\$s/v1/png/%2\$s/%3\$s/%4\$s.png";
Da taki URL:
//graphoid.wikimedia.org/mediawiki.org/v1/png/Extension:Graph/0/be66c7016b9de3188ef6a585950f10dc83239837.png /{domain}/v1/png/{title}/{revid}/{hash}.png
Parametry będą dostarczone w tej kolejności: 1=server, 2=title, 3=revid, 4=graph-hash-id.
Wszystkie parametry będą unikane poprzez rawurlencode().
Jeżeli wartość jest false
(domyślna), żaden url <noscript>
nie będzie generowany
Inne zmienne
Zmienna wgGraphUrlBlacklist została usunięta w 787d64a11 (7 Gru 2015).
wgGraphDataDomains została usunięta w e0813f85a (28 Styczeń 2016). Użyj zamiast tego wgGraphAllowedDomains.
Zmienna wgGraphUserServiceAlways została usunięta z b735f63ff4b (30 Wrzesień 2015).
Tworzenie przestrzeni nazw Wykresu
Aby przechowywać definicje wykresów jako niezależne strony w ich własnych przestrzeniach nazw, skonfiuguruj JsonConfig .
// See https://www.mediawiki.org/wiki/Extension:JsonConfig
$wgJsonConfigModels['graph.jsonconfig'] = 'graph\Content';
$wgJsonConfigs['graph.jsonconfig'] = array(
'namespace' => <PICK-A-NS-NUMBER>,
'nsName' => 'Graph',
'isLocal' => true,
);
Usługa Graphoid
Graphoid (git repo) is a node.js service that converts a graph definition into a static PNG image using the same Vega library code that runs in advanced browsers. The reason Graphoid was initially developed was to provide a static image so we wouldn't have to bundle Vega and d3 resource loader modules with every page response. See phab:T211881 for more details. The service is available on the Wikimedia cluster at https://www.mediawiki.org/api/rest_v1/#/Page%20content/get_page_graph_png__title___revision___graph_id_.
You can install it yourself:
$ sudo apt-get install libcairo2-dev libjpeg8-dev libpango1.0-dev libgif-dev build-essential g++
$ git clone https://gerrit.wikimedia.org/r/mediawiki/services/graphoid
$ cd graphoid
$ npm install
$ npm start
(note: this package is not being maintained (phab:T211881, and installation may fail, see phab:T196001 , phab:T239100. npm i --build-from-source may help.)
The service URLs contain the domain of the page (for example mediawiki.org), service version (v1), the title of the page with the graph (PageTitle), revision ID of the page (12345, but could be 0 for current), and a hash ID of the graph itself (also used in HTML page to identify graph definition), for example:
http://localhost:6927/mediawiki.org/v1/PageTitle/12345/a64b022a8fa5b7fc5e40a2c95cd0a114b2ae1174.png (deprecated url)
You configure the Graph extension to use the Graphoid service in LocalSettings.php with a line like
$wgGraphImgServiceUrl = "//localhost:6927/%1\$s/v1/%2\$s/%3\$s/%4\$s.png"; //deprecated path, older versions only
$wgGraphImgServiceUrl = "//graphoid.wikimedia.org/%1\$s/v1/png/%2\$s/%3\$s/%4\$s.png"; //deprecated path, older versions only
Configure graphoid services
You can further configure the service via its config file.
Edytor wizualny
Od 2015 rozszerzenie Graph posiada także moduł (ext.graph.VisualEditor) który umożliwia edycję wykresów w edytorze wizualnym.
Moduł ten jest rezultatem projektu Google Summer of Code 2015. Zobacz phab:T89287, aby uzyskać więcej informacji.
Moduł ten umożliwia użytkownikom podgląd wykresu za pomocą Edytora Wizualnego zamiast edycji trudnej składni rozszerzenia. Ponadto użytkownicy mogą otworzyć okno aby edytować typ wykresu, dane i marginesy. Interfejs użytkownika umożliwia także, w wypadku kiedy zaawansowani użytkownicy chcą skorygować ustawienia nie które nie są w nim dostępne, bezpośrednią edycję specyfikację JSON w edytorze wizualnym bez konieczności przełączania się do klasycznego edytora wikitekstu.
Ten pierwszy krok jest pierwszym stopniem do wielu możliwości edycji wykresów w edytorze wizualnym. Jest wiele kierunków w których ten moduł może być poprawiany i rozwijany.
To rozszerzenie jest wykorzystywane przez jeden lub więcej projektów Wikimedia. Oznacza to prawdopodobnie, że to rozszerzenie jest stabilne i działa wystarczająco dobrze, aby wykorzystywać je na stronach o dużym natężeniu ruchu. Odnajdź nazwę tego rozszerzenia w plikach konfiguracyjnych Wikimedia CommonSettings.php oraz InitialiseSettings.php, aby zobaczyć gdzie są zainstalowane. Pełną listę rozszerzeń zainstalowanych na określonej wiki można znaleźć na stronie Special:Version na danej wiki. |
Zobacz też
- Extension:GraphViz - w celu wyświetlania grafów ze zbiorów wierzchołków połączonych krawędziami.
- Plotly - otrwarto-źródłowa graficzna biblioteka JavaScript (z wykresami 3D)
- D3 - biblioteka Data-Driven Documents