Rozszerzenie:Wykres
Ostrzeżenie: The code or configuration described here poses a major security risk. Site administrators: You are advised against using it until this security issue is resolved. Problem: Podatne na ataki Cross-site scripting, ponieważ wprowadzany przez użytkowników ciąg jest przekazywany bezpośrednio do przeglądarki. Może to skutkować m.in przejęciem kont użytkowników. See zadanie T334940 for more information. Rozwiązanie: dokładnie waliduj wprowadzane przez użytkownika wartości i/lub zastosuj filtrowanie dla wszystkich znaków, które mają specjalne znaczenie w HTML |
To rozszerzenie nie jest aktualnie aktywnie rozwijane! Pomimo, że może nadal działać, jakiekolwiek zgłoszenia błędów lub propozycji funkcji będą najprawdopodobniej ignorowane. If you are interested in taking on the task of developing and maintaining this extension, you can request repository ownership. As a courtesy, you may want to contact the author. You should also remove this template and list yourself as maintaining the extension in the page's {{Rozszerzenie }} infobox. |
![]() Status wydania: niewspierane |
|
---|---|
Realizacja | Znaczniki , ContentHandler |
Opis | Wykresy tworzone przez dane |
Autor(zy) | |
MediaWiki | >= 1.43 |
Licencja | Licencja MIT |
Pobieranie | |
|
|
Quarterly downloads | 30 (Ranked 110th) |
Public wikis using | 884 (Ranked 281st) |
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. Graphs can be interactive.
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. The extension integrates with VisualEditor, providing a simple tool/wizard which generates basic graphs, by entering values directly to the editor.
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
- Wymagane rozszerzenie JsonConfig
- Pobierz i umieść plik(i) w katalogu o nazwie
Graph
w folderzeextensions/
.
Developers and code contributors should install the extension from Git instead, using:cd extensions/
git clone https://gerrit.wikimedia.org/r/mediawiki/extensions/Graph - Dodaj poniższy kod na dole twojego pliku LocalSettings.php :
wfLoadExtension( 'Graph' );
- Zrobione – Przejdź do Special:Version na twojej wiki, aby sprawdzić czy rozszerzenie zostało pomyślnie zainstalowane.
Instalacja Vagranta:
- Jeżeli korzystasz z Vagrant a, zainstaluj poprzez
vagrant roles enable graph --provision
Dodatkowe ustawienia konfiguracji
Jeżeli chcesz zreplikować środowisko produkcyjne jak en.wiki będziesz musiał postąpić według poniższych kroków:
- Install Scribunto , Imagemap and TemplateStyles , and enable SVG uploads
- If you use vagrant, you can use
vagrant roles enable --provision scribunto imagemap templatestyles svg
- If you use vagrant, you can use
- Import mediawiki.org's Module:Graph, Module:Graph/doc, Template:Nowrap and Template:Nowrap/styles.css (export link)
- Import enwiki's Module:Chart and Module:Chart/Default colors (export link)
- Import the file File:Circle_frame.svg
Debugging graphs and porting graphs from Vega 2 to Vega 5
A sandbox is provided at Special:GraphSandbox that works similar to the Vega graph editor. The MediaWiki tool includes compatibility code that maps older Vega schemas to the currently enabled version. Inserting an old schema in the main text area will print a modified and modernized schema underneath the graph where possible.
Similar to vega.github.io/editor, the Vega object can be inspected via the VEGA_DEBUG
JavaScript global.
See Vega's debugging guide on how to use it.
Migrating schemas from older Vega versions
Previously Graph supported Vega 2. You can paste the JSON of graphs in http://vega.github.io/vega-editor/?mode=vega to see how they previously rendered for comparison with Vega 5.
Special:GraphSandbox (for latest code see the beta cluster version of the sandbox) can be used to map older schemas to new schemas. Copy the old schema into the main textarea and the updated schema will appear in the text area below the graph. Copy the new schema into your code.
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' ],
];
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.
Rozszerzenie wykresu dodaje HTML do strony tam gdzie powinien znaleźć się wykres: <div>
zawierający tag $img.
Przykład:
<div class="mw-graph" data-graph-id="72edc224f0a10b343c1e84f63dbfc97cac9bc957">
</div>
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.
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)
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
wgGraphAllowedDomains
See the section on external data.
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.
Troubleshooting broken graphs
Errors with graphs will be logged in the developer console.
Error: Bad constructor arguments (phab:T277906)
To fix: Replace filepath:Earthmap1000x500compac.jpg with filepath:Earthmap1000x500.jpg
TypeError: undefined is not an object (evaluating 'datum.firstYear.value')
To fix: Make sure you have not set default as null
Zobacz też
- Diagram extensions
- Plotly — otrwarto-źródłowa graficzna biblioteka JavaScript (z wykresami 3D)
- D3 — biblioteka Data-Driven Documents
To rozszerzenie jest dołączone do następujących farm/hostów wiki lub pakietów: To nie jest pełna lista. Niektóre farmy/hosty wiki lub pakiety mogą zawierać to rozszerzenie nawet jeśli nie są one tutaj wymienione. Zawsze sprawdzaj swoje farmy/hosty wiki, aby to potwierdzić. |