Szablon:Wykres

Z Wikipedii, wolnej encyklopedii
Przejdź do nawigacji Przejdź do wyszukiwania
Template-info.png Dokumentacja szablonu [zobacz] [edytuj] [historia] [odśwież]

Użycie[edytuj kod]

Opis parametrów[edytuj kod]

  • x: wartości dla x jako lista wartości oddzielanych przecinkami. Dla danych jako daty i czasu patrz uwagi w xType i yType
  • y lub y1, y2, …: wartości dla y, odpowiednio dla jednej lub wielu serii danych. Dla wykresów kołowych y2 określa promienie odpowiadających sektorów. Dla danych jako daty i czasu patrz uwagi w xType i yType
  • legend: pokaż legendę (tylko gdy dodano wiele serii danych)
  • width: szerokość wykresu
  • heigth: wysokość wykresu
  • type: typ wykresu: line dla wykresu liniowego, area dla wykresu zakreślonego lub rect dla (kolumnowego) wykresu słupkowego lub pie dla wykresu kołowego. Nawarstwiać wiele serii można za pomocą prefiksu stacked, np. stackedarea.
  • colors: paleta kolorów używanych przez wykres jako lista kolorów oddzielona przecinkami. Dopuszczalne formaty kolorów to #rgb/#rrggbb/#aarrggbb lub nazwa koloru CSS. Dla #aarrggbb składowa aa to kanał alfa, tj. FF=100% opacity, 80=50% nieprzezroczystość / przezroczystość, itd. (Domyślna paleta kolorów to category10).
  • interpolate: metoda interpolacji dla wykresu liniowego i zakreślonego. Zalecane jest użycie monotone dla monotone cubic interpolation – dalsze obsługiwane wartości są wymienione na https://github.com/vega/vega/wiki/Marks#area.
  • xAxisTitle i yAxisTitle: etykiety osi x i y
  • xAxisMin, xAxisMax, yAxisMin, i yAxisMax: minimalne i maksymalne wartości osi x i y
  • innerRadius: Dla wykresów kołowych: określa promień otworu wewnętrznego wykresu "pączkowego".
  • xAxisFormat i yAxisFormat: zmienia formatowanie etykiet osi. Obsługiwane wartości: [1]. Na przykład, format % będzie pokazywał w procentach. Dla dat specyfikacja dopuszczalnych wartości to [2], n.p. xAxisFormat=%d-%m-%Y wyświetli 13-01-1977.
  • xType i yType: Typy danych wartości, np. integer dla liczb całkowitych, number dla liczb rzeczywistych, date dla dat (np. YYYY-MM-DD), oraz string dla wartości tekstowych. Uwaga: Date nie działa dla wykresów słupkowych. Dla danych wejściowych typu date należy używać formatu daty ISO (n.p. YYYY-MM-DD) wg [3]. Inne formaty daty mogą działać ale nie we wszystkich przeglądarkach. Data jest niestety wyświetlana jedynie w formacie en-US dla wszystkich języków Wikipedii. Obejściem tego problemu jest użycie xAxisFormat i yAxisFormat z numerycznym formatem daty.
  • y1Title, y2Title, …: etykiety serii danych na legendzie
  • linewidth: grubość linii na wykresach liniowych lub odległość segmentów wykresu kołowego
  • linewidths: różna grubość lini może być zdefiniowana dla każdej serii danych za pomocą csv, jeżeli 0 przy "showSymbols" daje w wyniku wykres punktowy, przykład linewidths=1, 0, 5, 0.2
  • showSymbols: pokazuje symbol dla danego punktu danych, liczba to wielkość, domyślnie 2.5, może być zdefiniowana dla każdej serii danych za pomocą csv, przykład showSymbols=1, 2, 3, 4
  • symbolsShape: zdefiniowany kształt symbolu: circle, x, square, cross, diamond, triangle_up, triangle_down, triangle_right, triangle_left. Może być zdefiniowana dla każdej serii danych za pomocą csv, przykład symbolsShape= circle, cross, square
  • symbolsNoFill: jeżeli zdefiniowane symbol będzie bez wypełnienia (tylko krawędź)
  • symbolsStroke: szerokość krawędzi symbolu jeżeli symbol "x" lub wybrabna opcja "symbolsNoFill", domyślnie 2.5
  • showValues: Dodatkowo, wyświetl wartości y jako tekst. (Obecnie, obsługiwane są tylko wykresy słupkowe (bez warstw) oraz kołowe.) Wyjście może być skonfigurowane za pomocą parametrów podanych jako name1:value1, name2:value2:
    • format: Formatuj wyjście zgodnie z //github.com/mbostock/d3/wiki/Formatting#numbers dla liczb lub //github.com/mbostock/d3/wiki/Time-Formatting dla daty/czasu.
    • fontcolor: kolor tekstu
    • fontsize: rozmiar tekstu
    • offset: przesuń tekst o podaną odległość. Dla wykresów słupkowych i kołowych z midangle określa także czy czy tekst ma być w środku czy na zewnątrz wykresu.
    • angle (tylko wykresy kołowe): kąt tekstu w stopniach lub midangle (domyślnie) dla dynamicznych kątów bazujących na środku kąta sektora.
  • Adnotacje
    • vAnnotatonsLine i hAnnotatonsLine: wyświetla pionową i poziomą linę adnotacji dla poszczególnych wartości, przykład hAnnotatonsLine = 1, 2, 3
    • vAnnotatonsLabel i hAnnotatonsLabel: wyświetla opis do pionowej i poziomej linii adnotacji, przykład hAnnotationLabel = label1, label2, label3
  • formatjson: sformatuj obiekt JSON dla lepszej czytelności

Przykład[edytuj kod]

{{Wykres|width=400|height=120|type=line|x=1,2,3,4,5,6,7,8|y=10,12,6,14,2,10,7,9}}

{{Wykres|width=400|height=100|type=area|x=1,2,3,4,5,6,7,8|y=10,12,6,14,2,10,7,9}}

{{Wykres|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}}

{{Wykres|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|legend=Legenda|type=line|x=1,2,3,4,5,6,7,8|y1=10,12,6,14,2,10,7,9|y2=2,4,6,8,13,11,9,2|colors=#0000aa,#ff8000}}

{{Wykres|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|legend=Legenda|type=area|x=1,2,3,4,5,6,7,8|y1=10,12,6,14,2,10,7,9|y2=2,4,6,8,13,11,9,2|colors=#800000aa,#80ff8000}}

{{Wykres|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|legend=Legenda|type=rect|x=1,2,3,4,5,6,7,8|y1=10,12,6,14,2,10,7,9|y2=2,4,6,8,13,11,9,2|colors=#800000aa,#80ff8000}}

{{Wykres|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|legend=Legenda|type=stackedarea|x=1,2,3,4,5,6,7,8|y1=10,12,6,14,2,10,7,9|y2=2,4,6,8,13,11,9,2|interpolate=monotone|colors=seagreen, orchid}}

{{Wykres|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|legend=Legenda|type=stackedrect|x=1,2,3,4,5,6,7,8|y1=10,12,6,14,2,10,7,9|y2=2,4,6,8,13,11,9,2|y1Title=Data A|y2Title=Data B|colors=seagreen, orchid}}

{{Wykres|width=100|height=100|type=pie|legend=Legenda|x=A,B,C,D,E,F,G,H,I|y1=100,200,150,300,100,100,150,50,200}}

{{Wykres|width=100|height=100|type=pie|legend=Legenda|x=A,B,C,D,E,F,G,H,I|y1=100,200,150,300,100,100,150,50,200|showValues=}}

{{Wykres|width=100|height=100|type=pie|legend=Legenda|x=A,B,C,D,E,F,G,H,I|y1=100,200,150,300,100,100,150,50,200|y2=7,8,9,8,8,9,10,9,5|showValues=}}

{{Wykres|width=100|height=100|type=pie|innerRadius=40|legend=Legenda|x=A,B,C,D,E,F,G,H,I|y1=100,200,150,300,100,100,150,50,200}}

Wykres zakreślony z pionowymi adnotacjami

{{Wykres
|vAnnotatonsLine=1, 2, 3 
|vAnnotatonsLabel=opis 1, opis 2, opis 3
|colors=#ffff5ba0, #641050ff, #ffaaff00
|type=area
|x=0,1,2,3
|y3=0,3.342,2.3423,5.32423|y2=1,2.342,4.63,2.32423|y1=3,1.342,2.63,6.32423}}

Błędy[edytuj kod]

Błędy należy zgłaszać na stronie Wikipedia:Kawiarenka/Kwestie techniczne.

Parametry szablonu (strukturyzacja VE)[edytuj kod]

Szablon do tworzenia wykresów.

Parametry szablonu

ParametrOpisTypStatus
Wartości xx

wartości dla x jako lista wartości oddzielanych przecinkami

Ciąg znakówwymagany
Wartości yy y1 y2

wartości dla y, odpowiednio dla jednej lub wielu serii danych. Dla wykresów kołowych y2 określa promienie odpowiadających sektorów.

Ciąg znakówwymagany
szerokośćwidth

szerokość wykresu w pikselach

Domyślne
300
Liczbawymagany
wysokośćheigth

szerokość wykresu w pikselach

Domyślne
200
Liczbawymagany
typtype

typ wykresu: line dla wykresu liniowego, area dla wykresu zakreślonego lub rect dla (kolumnowego) wykresu słupkowego lub pie dla wykresu kołowego. Nawarstwiać wiele serii można za pomocą prefiksu stacked, np. stackedarea.

Ciąg znakówopcjonalny
kolorycolors

paleta kolorów używanych przez wykres jako lista kolorów oddzielona przecinkami. Dopuszczalne formaty kolorów to #rgb/#rrggbb/#aarrggbb lub nazwa koloru CSS. Dla #aarrggbb składowa aa to kanał alfa, tj. FF=100% opacity, 80=50% nieprzezroczystość/przezroczystość, itd. (Domyślna paleta kolorów to category10).

Ciąg znakówopcjonalny
etykieta osi xxAxisTitle

etykieta osi x

Ciąg znakówopcjonalny
etykieta osi yyAxisTitle

etykieta osi y

Ciąg znakówopcjonalny
interpolacjainterpolate

metoda interpolacji dla wykresu liniowego i zakreślonego. Zalecane jest użycie monotone dla monotone cubic interpolation – dalsze obsługiwane wartości są wymienione na [https://github.com/vega/vega/wiki/Marks#area].

Ciąg znakówopcjonalny

Zobacz też[edytuj kod]