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
  • 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.
  • 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
  • xAxisFormat i yAxisFormat: zmienia formatowanie etykiet osi. Obsługiwane wartości: //github.com/mbostock/d3/wiki/Formatting i //github.com/mbostock/d3/wiki/Time-Formatting. Na przykład, format % będzie pokazywał w procentach.
  • 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.
  • y1Title, y2Title, …: etykiety serii danych na legendzie
  • linewidth: grubość linii na wykresach liniowych lub odległość segmentów wykresu kołowego
  • 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.
  • innerRadius: Dla wykresów kołowych: określa promień otworu wewnętrznego wykresu "pączkowego".
  • 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}}

Liczba przypadków dla Polski bez Śląska i dla Śląska na mln mieszkańców
{{Wykres |width=840|height=200|legend=|xAxisTitle= data|xAxisAngle= -90|yAxisTitle= Liczba przypadków na mln mieszkańców|type=stackedrect|colors= red, blue |x= 10 mar, 11 mar, 12 mar, 13 mar, 14 mar, 15 mar, 16 mar, 17 mar, 18 mar, 19 mar, 20 mar, 21 mar, 22 mar, 23 mar, 24 mar, 25 mar, 26 mar, 27 mar, 28 mar, 29 mar, 30 mar, 31 mar, 1 kwi, 2 kwi, 3 kwi, 4 kwi, 5 kwi, 6 kwi, 7 kwi, 8 kwi, 9 kwi, 10 kwi, 11 kwi, 12 kwi, 13 kwi, 14 kwi, 15 kwi, 16 kwi, 17 kwi, 18 kwi, 19 kwi, 20 kwi, 21 kwi, 22 kwi, 23 kwi, 24 kwi, 25 kwi, 26 kwi, 27 kwi, 28 kwi, 29 kwi, 30 kwi, 1 maj, 2 maj, 3 maj, 4 maj, 5 maj, 6 maj, 7 maj, 8 maj, 9 maj, 10 maj, 11 maj, 12 maj, 13 maj, 14 maj, 15 maj, 16 maj, 17 maj, 18 maj, 19 maj, 20 maj, 21 maj, 22 maj, 23 maj, 24 maj, 25 maj, 26 maj, 27 maj, 28 maj |y1= 0.44, 0.22, 0.66, 0.22, 0.00, 0.44, 0.89, 1.33, 1.33, 2.66, 0.89, 2.21, 2.21, 2.43, 2.21, 4.43, 4.43, 3.10, 5.31, 6.64, 3.10, 12.17, 1.77, 6.42, 28.77, 14.39, 9.07, 5.53, 8.63, 9.52, 11.29, 7.53, 11.51, 14.39, 7.30, 14.17, 9.96, 18.15, 32.98, 11.95, 37.63, 15.71, 11.95, 10.18, 7.75, 21.47, 14.83, 16.38, 9.30, 20.81, 35.19, 26.56, 31.21, 14.61, 28.77, 17.71, 29.66, 34.75, 25.68, 39.62, 34.53, 37.85, 47.14, 108.90, 36.96, 66.84, 64.85, 36.52, 39.84, 45.37, 58.21, 60.87, 55.56, 63.08, 39.62, 40.95, 34.97, 60.65, 38.96, 30.54 |y2= 0.09, 0.24, 0.50, 0.47, 1.06, 0.56, 1.42, 1.62, 1.27, 1.65, 1.95, 2.98, 2.60, 3.07, 4.19, 3.84, 4.43, 4.55, 6.64, 5.73, 5.29, 5.93, 6.94, 10.72, 9.06, 5.29, 12.81, 8.44, 11.69, 9.27, 9.42, 10.22, 10.30, 7.47, 6.70, 6.02, 9.89, 7.50, 9.21, 9.12, 11.07, 6.94, 6.17, 7.88, 9.06, 8.39, 9.27, 7.97, 7.17, 6.55, 7.77, 5.31, 2.57, 6.02, 5.55, 6.88, 8.59, 4.55, 6.14, 4.75, 3.90, 5.14, 3.45, 3.04, 4.58, 3.22, 3.19, 2.24, 2.72, 4.46, 3.54, 5.79, 4.55, 5.64, 4.05, 6.20, 5.40, 5.05, 6.58, 6.32 }}

Błędy[edytuj kod]

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

Uważam, że konkretnie dla tego wykresu jest lepsze ustawienie obok siebie dwóch słupków bo niebieski widac od razu, że od pewnego momentu sie zmniejsza. W tym przykładzie oznacza to, że epidemia w Polsce oprócz Śląska powoli w sposób falujący zanika. Użyłem na Pandemia Covid-19 w Polsce.

Jeżeli nie wyrzucisz tego przykładu to proszę zostaw także moją wersję, żeby inni mogli na praktycznym przykładzie porównać obie wersje.
W wersji stack lepiej by było żeby Polska bez Śląska była na dole, a Śląsk na górze.
Parametru uwaga nie ma, a zrobiłem sztucznie po kilku eksperymentach jako rodzaj comment, bo takiego parametru nie ma, a warto żeby był. Tutaj dla innych kontynuatorów informacja przez co należy dzielić liczbę nowych przypadków żeby wychodziło "na milion".

@Pietrasagh -- Zylla (dyskusja) 11:03, 30 maj 2020 (CEST)

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]