Omówienie
Hisogram to wykres, który grupuje dane liczbowe w przedziałach, wyświetlając przedziały w postaci kolumn posegmentowanych. Służą do przedstawienia rozkładu zbioru danych, czyli tego, jak często wartości mieszczą się w zakresach.
Liczbę przedziałów znajdziesz automatycznie. Wszystkie przedziały mają taką samą szerokość i wysokość proporcjonalną do liczby punktów danych w koszyku. Pod innymi względami histogramy są podobne do wykresów kolumnowych.
Przykład
Oto histogram długości dinozaurów:
Histogram informuje, że najpopularniejszy pojemnik to mniej niż 10 metrów, a tylko jeden dinozaur ma ponad 40 metrów. Najeżdżając wskaźnikiem myszy na słupek, możemy odkryć, że sejszaur to sejszozaur (może to być bardzo duży diplodok, a paleontolodzy nie mają pewności).
Poniżej znajduje się kod do wygenerowania tego histogramu. Po zdefiniowaniu danych (w tym miejscu i za pomocą funkcji google.visualization.arrayToDataTable
) wykres jest definiowany za pomocą wywołania metody google.visualization.Histogram
i rysowany metodą draw
.
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["corechart"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Dinosaur', 'Length'], ['Acrocanthosaurus (top-spined lizard)', 12.2], ['Albertosaurus (Alberta lizard)', 9.1], ['Allosaurus (other lizard)', 12.2], ['Apatosaurus (deceptive lizard)', 22.9], ['Archaeopteryx (ancient wing)', 0.9], ['Argentinosaurus (Argentina lizard)', 36.6], ['Baryonyx (heavy claws)', 9.1], ['Brachiosaurus (arm lizard)', 30.5], ['Ceratosaurus (horned lizard)', 6.1], ['Coelophysis (hollow form)', 2.7], ['Compsognathus (elegant jaw)', 0.9], ['Deinonychus (terrible claw)', 2.7], ['Diplodocus (double beam)', 27.1], ['Dromicelomimus (emu mimic)', 3.4], ['Gallimimus (fowl mimic)', 5.5], ['Mamenchisaurus (Mamenchi lizard)', 21.0], ['Megalosaurus (big lizard)', 7.9], ['Microvenator (small hunter)', 1.2], ['Ornithomimus (bird mimic)', 4.6], ['Oviraptor (egg robber)', 1.5], ['Plateosaurus (flat lizard)', 7.9], ['Sauronithoides (narrow-clawed lizard)', 2.0], ['Seismosaurus (tremor lizard)', 45.7], ['Spinosaurus (spiny lizard)', 12.2], ['Supersaurus (super lizard)', 30.5], ['Tyrannosaurus (tyrant lizard)', 15.2], ['Ultrasaurus (ultra lizard)', 30.5], ['Velociraptor (swift robber)', 1.8]]); var options = { title: 'Lengths of dinosaurs, in meters', legend: { position: 'none' }, }; var chart = new google.visualization.Histogram(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html>
Etykiety (tutaj, nazwy dinozaurów) można pominąć – w takim przypadku etykietki będą zawierać tylko wartość liczbową.
Kontrola kolorów
Oto histogram populacji krajów:
Na świecie jest ponad 200 krajów, których populacja jest mniejsza niż 100 milionów, a później bardzo szybko spada.
Ten histogram korzysta z opcji colors
, aby narysować dane w kolorze zielonym:
var options = { title: 'Country Populations', legend: { position: 'none' }, colors: ['green'], };
Tak jak na wszystkich wykresach Google, kolory można określić jako angielskie nazwy lub jako wartości szesnastkowe.
Zarządzanie zasobnikami
Domyślnie Wykresy Google automatycznie wybierają rozmiar zasobnika za pomocą dobrze znanego algorytmu histogramów. Czasami trzeba jednak zastąpić to ustawienie. Wykres powyżej przedstawia przykład. W pierwszej grupie jest tak wiele krajów, że trudno jest sprawdzić je w innych.
W takich sytuacjach na wykresie histogramu dostępne są 2 opcje: histogram.bucketSize
, która zastępuje algorytm i zakoduje na stałe rozmiar zasobnika, oraz histogram.lastBucketPercentile
. Druga opcja wymaga więcej wyjaśnień: zmienia obliczenie rozmiarów zasobników w taki sposób, aby ignorowały wartości, które są wyższe lub niższe od wartości reszty o określoną wartość procentową. Wartości są nadal uwzględniane w histogramie, ale nie mają wpływu na sposób ich grupowania. Jest to przydatne, gdy nie chcesz, aby wartości odstające trafiły do ich własnych segmentów. Zamiast tego zostaną zgrupowane z pierwszym lub ostatnim segmentem.
Na powyższym wykresie pominęliśmy 5 najwyższych i ostatnich 5 procent wartości przy obliczaniu rozmiaru zasobnika. Wartości są nadal wyświetlane na wykresie. Zmienił się tylko rozmiar zasobnika, ale dzięki temu histogram jest bardziej czytelny.
Ten przykład pokazuje również, jak można zmienić skalę osi pionowej, by użyć skali „odbicia lustrzanego logu”, co pomaga również przy wykresach danych, które składają się z długich ogonów o małych wartościach.
var options = { title: 'Country Populations', legend: { position: 'none' }, colors: ['#e7711c'], histogram: { lastBucketPercentile: 5 }, vAxis: { scaleType: 'mirrorLog' } };
Jak widać, usunięcie z obliczenia górnych i dolnych 5% spowodowało, że rozmiar zasobnika wynosił 10 000 000, a nie 100 000 000, które byłoby inaczej. Gdyby od początku wiedzieli Państwo, że rozmiar grupy 10 milionów jest satysfakcjonujący, można wykorzystać histogram.bucketSize
:
var options = { title: 'Country Populations', legend: { position: 'none' }, colors: ['#e7711c'], histogram: { bucketSize: 10000000 } };
W poniższym przykładzie pokazujemy, jak zwiększyć zakres zasobników i wyświetlić znacznie więcej zasobników bez żadnych przerw. Za pomocą opcji maxNumBuckets
można zwiększyć domyślną liczbę zasobników. Opcje histogram.minValue
i histogram.maxValue
zwiększą zakres zasobników, ale pamiętaj, że jeśli istnieją dane spoza tego zakresu, opcje te nie zmniejszą zakresu.
Ten przykład pokazuje również, że można określić znaczniki, które mają być wyświetlane dla każdego zasobnika, za pomocą jawnej opcji ticks
dla hAxis
. Nie ma to wpływu na same zasobniki, a jedynie na sposób wyświetlania znaczników.
Pamiętaj też, że określamy chartArea.width
w taki sposób, aby liczba zasobników zmieściła się dokładniej bez widocznych artefaktów. Oto opcje dostępne dla tego przykładu.
var options = { title: 'Approximating Normal Distribution', legend: { position: 'none' }, colors: ['#4285F4'], chartArea: { width: 405 }, hAxis: { ticks: [-1, -0.75, -0.5, -0.25, 0, 0.25, 0.5, 0.75, 1] }, bar: { gap: 0 }, histogram: { bucketSize: 0.01, maxNumBuckets: 400, minValue: -1, maxValue: 1 } };
Wiele serii
Oto histogram ładunków cząstek subatomowych według modelu standardowego:
Powyższy wykres zawiera 1 serię zawierającą wszystkie cząstki. Cząstki subatomowe można podzielić na 4 grupy: kwarki, leptony i boony. Omówmy każdy z nich jako odrębną serię:
Na tym wykresie używamy innej serii (a tym samym koloru) dla każdego z 4 typów cząstek subatomowych. Jawnie ustawiamy interpolateNulls
na false
, aby mieć pewność, że wartości null (potrzebne, ponieważ serie mają nierówną długość) nie są generowane. Ustawiono też legend.maxLines
, by dodać
kolejny wiersz do legendy:
var data = google.visualization.arrayToDataTable([ ['Quarks', 'Leptons', 'Gauge Bosons', 'Scalar Bosons'], [2/3, -1, 0, 0], [2/3, -1, 0, null], [2/3, -1, 0, null], [-1/3, 0, 1, null], [-1/3, 0, -1, null], [-1/3, 0, null, null], [-1/3, 0, null, null] ]); var options = { title: 'Charges of subatomic particles', legend: { position: 'top', maxLines: 2 }, colors: ['#5C3292', '#1A8763', '#871B47', '#999999'], interpolateNulls: false, };
Wczytuję
Nazwa pakietu google.charts.load
to "corechart"
.
google.charts.load("current", {packages: ["corechart"]});
Nazwa klasy wizualizacji to google.visualization.Histogram
:
var visualization = new google.visualization.Histogram(container);
Format danych
Istnieją 2 sposoby wypełniania tabeli danych histogramu. Gdy mamy tylko jedną serię:
var data = google.visualization.arrayToDataTable([ ['Name', 'Number'], ['Name 1', number1], ['Name 2', number2], ['Name 3', number3], ... ]);
...a jeśli istnieje wiele serii:
var data = google.visualization.arrayToDataTable([ ['Series Name 1', 'Series Name 2', 'Series Name 3', ...], [series1_number1, series2_number1, series3_number1, ...], [series1_number2, series2_number2, series3_number2, ...], [series1_number3, series2_number3, series3_number3, ...], ... ]);
Obecnie dla histogramów nie są obsługiwane żadne opcjonalne role kolumn.
Opcje konfiguracji
Nazwa | |
---|---|
animation.duration |
Czas trwania animacji w milisekundach. Szczegółowe informacje znajdziesz w dokumentacji animacji. Typ: liczba
Wartość domyślna: 0
|
animation.easing |
Funkcja wygładzania zastosowana do animacji. Dostępne są te ustawienia:
Typ: ciąg znaków
Domyślnie: „liniowy”
|
animation.startup |
Określa, czy wykres będzie animowany przy pierwszym rysowaniu. Jeśli parametr ma wartość Typ: wartość logiczna
Domyślnie fałsz
|
axisTitlesPosition |
Gdzie umieszczać tytuły osi w porównaniu z obszarem wykresu. Obsługiwane wartości:
Typ: ciąg znaków
Domyślnie: „out”
|
backgroundColor |
Kolor tła głównego obszaru wykresu. Może to być prosty ciąg znaków koloru HTML, np. Typ: ciąg znaków lub obiekt
Domyślnie: „white”
|
backgroundColor.stroke |
Kolor obramowania wykresu jako ciąg znaków HTML koloru. Typ: ciąg znaków
Domyślnie: „#666”.
|
backgroundColor.strokeWidth |
Szerokość obramowania w pikselach. Typ: liczba
Wartość domyślna: 0
|
backgroundColor.fill |
Kolor wypełnienia wykresu jako ciąg znaków HTML koloru. Typ: ciąg znaków
Domyślnie: „white”
|
bar.groupWidth |
Szerokość grupy słupków podana w jednym z tych formatów:
Typ: liczba lub ciąg znaków.
Domyślny: złoty współczynnik, czyli około „61,8%”.
|
chartArea |
Obiekt z elementami służącymi do konfigurowania miejsca docelowego i rozmiaru obszaru wykresu (gdzie sam wykres jest rysowany, z wyłączeniem osi i legend). Obsługiwane są dwa formaty: liczba lub liczba, po której następuje znak %. Prosta liczba to wartość w pikselach, po której następuje znak %, a po nim wartość procentowa. Przykład: Typ: obiekt
Wartość domyślna:null
|
chartArea.backgroundColor |
Kolor tła obszaru wykresu. Używany ciąg może być ciągiem szesnastkowym (np. „#fdc”) lub angielską nazwę koloru. Jeśli używany jest obiekt, można podać te właściwości:
Typ: ciąg znaków lub obiekt
Domyślnie: „white”
|
chartArea.left |
Jak daleko od lewej krawędzi należy narysować wykres. Typ: liczba lub ciąg znaków.
Domyślnie automatycznie
|
chartArea.top |
Odległość wykresu od górnej krawędzi. Typ: liczba lub ciąg znaków.
Domyślnie automatycznie
|
chartArea.width |
Szerokość obszaru wykresu. Typ: liczba lub ciąg znaków.
Domyślnie automatycznie
|
chartArea.height |
Wysokość obszaru wykresu. Typ: liczba lub ciąg znaków.
Domyślnie automatycznie
|
kolory |
Kolory elementów wykresu. Tablica ciągów znaków, w których każdy element jest ciągiem znaków koloru HTML, np. Typ: tablica ciągów znaków
Domyślne:kolory domyślne
|
dataOpacity |
Przezroczystość punktów danych – wartość 1,0 oznacza całkowitą nieprzezroczystość, a wartość 0,0 – pełną przezroczystość. Na wykresach punktowych, histogramach, słupkowych i kolumnowych oznacza to widoczne dane: kropki na wykresie punktowym, a na innych prostokątach – prostokąty. Na wykresach, na których wybór danych powoduje utworzenie kropki (np. na wykresach liniowych i warstwowych), odnosi się ona do okręgów widocznych po najechaniu kursorem lub zaznaczeniu. Wykres mieszany prezentuje oba zachowania i ta opcja nie ma wpływu na inne wykresy. Aby dowiedzieć się, jak zmienić przezroczystość linii trendu, przeczytaj o przezroczystości linii trendu . Typ: liczba
Wartość domyślna: 1,0
|
enableInteractivity |
Określa, czy wykres generuje zdarzenia dotyczące użytkowników czy reaguje na interakcję użytkownika. Jeśli ma wartość false (fałsz), wykres nie będzie wywoływać zdarzenia „select” ani innych zdarzeń związanych z interakcją (ale będzie generować zdarzenia gotowe lub zdarzenia błędu) i nie będzie wyświetlać tekstu wyświetlanego po najechaniu kursorem ani w inny sposób zmieniać się w zależności od danych wejściowych użytkownika. Typ: wartość logiczna
Wartość domyślna:true (prawda)
|
focusTarget |
Typ elementu, który zostanie zaznaczony po najechaniu kursorem myszy. Wpływa też na to, który element jest wybierany kliknięciem myszy i który element tabeli danych jest powiązany ze zdarzeniami. Może to być:
W polu „category” (kategoria) etykietka pokazuje wszystkie wartości kategorii. Ta opcja może przydać się do porównywania wartości różnych serii. Typ: ciąg znaków
Wartość domyślna: „datum”.
|
fontSize |
Domyślny rozmiar czcionki całego tekstu na wykresie (w pikselach). Możesz zastąpić to ustawienie za pomocą właściwości dla konkretnych elementów wykresu. Typ: liczba
Domyślne:automatyczne
|
fontName |
Domyślna krój czcionki dla całego tekstu na wykresie. Możesz zastąpić to ustawienie za pomocą właściwości dla konkretnych elementów wykresu. Typ: ciąg znaków
Wartość domyślna: „Blogger”
|
forceIFrame |
Rysuje wykres wewnątrz ramki wbudowanej. (Pamiętaj, że w IE8 ta opcja jest ignorowana – wszystkie wykresy w IE8 są rysowane w ramkach i-frame). Typ: wartość logiczna
Wartość domyślna: fałsz.
|
hAxis |
Obiekt z elementami umożliwiającymi konfigurowanie różnych elementów osi poziomej. Aby określić właściwości tego obiektu, możesz użyć notacji literału obiektu, jak pokazano poniżej: { title: 'Hello', titleTextStyle: { color: '#FF0000' } } Typ: obiekt
Wartość domyślna:null
|
hAxis.gridlines |
Obiekt z właściwościami służącymi do konfigurowania linii siatki na osi poziomej. Pamiętaj, że linie siatki na osi poziomej są rysowane w pionie. Aby określić właściwości tego obiektu, możesz użyć notacji literału obiektu w następujący sposób: {color: '#333', minSpacing: 20} Typ: obiekt
Wartość domyślna:null
|
hAxis.gridlines.color |
Kolor poziomych linii siatki w obszarze wykresu. Podaj prawidłowy ciąg znaków HTML koloru. Typ: ciąg znaków
Domyślnie: „#CCC”.
|
hAxis.gridlines.count |
Przybliżona liczba poziomych linii siatki w obszarze wykresu.
Jeśli podasz liczbę dodatnią dla elementu Typ: liczba
Wartość domyślna: -1
|
hAxis.gridlines.interval |
Tablica rozmiarów (jako wartości danych, a nie pikseli) między sąsiednimi liniami siatki. Ta opcja jest obecnie dostępna tylko w przypadku osi liczbowych, ale jest ona podobna do opcji Typ: liczba od 1 do 10 (bez 10).
Wartość domyślna: obliczone.
|
hAxis.gridlines.minSpacing |
Minimalna przestrzeń ekranu (w pikselach) między głównymi liniami siatki na osi HAx.
Wartość domyślna głównych linii siatki to Typ: liczba
Wartość domyślna: obliczone.
|
hAxis.gridlines.multiple |
Wszystkie wartości linii siatki i znaczników muszą być wielokrotnościami wartości tej opcji. Pamiętaj, że w przeciwieństwie do interwałów potęga dziesięciokrotnej wielokrotności nie jest uwzględniana.
Możesz więc wymuszać, aby znaczniki były liczbami całkowitymi, określając wartość Typ: liczba
Wartość domyślna: 1
|
hAxis.gridlines.units |
Zastępuje domyślny format różnych aspektów typów danych daty, daty, godziny i godziny, gdy są używane z liniami siatki obliczonymi na wykresie. Umożliwia formatowanie lat, miesięcy, dni, godzin, minut, sekund i milisekund. Ogólny format to: gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]} hours: {format: [/*format strings here*/]} minutes: {format: [/*format strings here*/]} seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]}, } } Więcej informacji znajdziesz w sekcji Daty i godziny. Typ: obiekt
Wartość domyślna:null
|
hAxis.minorGridlines |
Obiekt z elementami służącymi do konfigurowania podrzędnych linii siatki na osi poziomej, podobnie jak w przypadku opcji hAxis.gridlines. Typ: obiekt
Wartość domyślna:null
|
hAxis.minorGridlines.color |
Kolor poziomych mniejszych linii siatki w obszarze wykresu. Podaj prawidłowy ciąg znaków HTML koloru. Typ: ciąg znaków
Domyślny: połączenie koloru linii siatki i koloru tła.
|
hAxis.minorGridlines.count |
Opcja Typ: liczba
Wartość domyślna: 1
|
hAxis.minorGridlines.interval |
Opcja MinGridlines.interval jest podobna do opcji interwału większych linii siatki, ale wybrany przedział będzie zawsze równy dzielnikowi większej linii siatki.
Domyślny interwał dla skal liniowych to Typ: liczba
Wartość domyślna: 1
|
hAxis.minorGridlines.minSpacing |
Minimalna wymagana ilość miejsca (w pikselach) między sąsiednimi mniejszymi liniami siatki oraz między mniejszymi i głównymi liniami siatki. Wartość domyślna to 1/2 minSpacing głównych linii siatki dla skal liniowych i 1/5 minSpacing dla skal logicznych. Typ: liczba
Default (wartość domyślna): obliczone
|
hAxis.minorGridlines.multiple |
Tak samo jak w przypadku głównych Typ: liczba
Wartość domyślna: 1
|
hAxis.minorGridlines.units |
Zastępuje domyślny format różnych aspektów danych typu data, godzina i godzina w przypadku używania z wykresami podrzędnymi obliczonymi na wykresie. Umożliwia formatowanie lat, miesięcy, dni, godzin, minut, sekund i milisekund. Ogólny format to: gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]} hours: {format: [/*format strings here*/]} minutes: {format: [/*format strings here*/]} seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]}, } } Więcej informacji znajdziesz w sekcji Daty i godziny. Typ: obiekt
Wartość domyślna:null
|
hAxis.textPosition |
Położenie tekstu na osi poziomej względem obszaru wykresu. Obsługiwane wartości: „out”, „in”, „none”. Typ: ciąg znaków
Domyślnie: „out”
|
hAxis.textStyle |
Obiekt określający styl tekstu osi poziomej. Obiekt ma ten format: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Typ: obiekt
Domyślnie:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
hAxis.title |
Właściwość Typ: ciąg znaków
Wartość domyślna:null
|
hAxis.titleTextStyle |
Obiekt określający styl tekstu tytułu osi poziomej. Obiekt ma ten format: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Typ: obiekt
Domyślnie:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
hAxis.allowContainerBoundaryTextCutoff |
W przypadku wartości false (fałsz) najbardziej zewnętrzne etykiety będą ukryte, zamiast zezwalać na ich przycinanie przez kontener wykresu. Jeśli ma wartość Prawda, przycinanie etykiet jest dozwolone. Typ: wartość logiczna
Wartość domyślna: fałsz.
|
hAxis.slantedText |
Jeśli ma wartość prawda, narysuj tekst na osi poziomej pod kątem, aby dopasować większy tekst wzdłuż osi. Jeśli nie, narysuj tekst osi poziomej pionowo. Jeśli tekst jest przechylony pionowo, domyślnie nie zmieści się on w całości. Zwróć uwagę, że ta opcja jest dostępna tylko wtedy, gdy Typ: wartość logiczna
Domyślne:automatyczne
|
hAxis.slantedTextAngle |
Kąt tekstu na osi poziomej (jeśli jest on skośny). Ignorowana, jeśli właściwość Typ: liczba, -90–90
Wartość domyślna: 30
|
hAxis.maxAlternation |
Maksymalna liczba poziomów tekstu na osi poziomej. Jeśli etykiety tekstowe osi staną się zbyt zatłoczone, serwer może przesuwać sąsiednie etykiety w górę lub w dół, aby je lepiej dopasować. Ta wartość określa największą liczbę używanych poziomów. Serwer może użyć mniejszej liczby poziomów, jeśli etykiety mieszczą się bez nakładania się. Domyślna wartość dla dat i godzin to 1. Typ: liczba
Wartość domyślna: 2
|
hAxis.maxTextLines |
Maksymalna dozwolona liczba wierszy w etykietach tekstowych. Etykiety mogą obejmować wiele wierszy, jeśli są za długie, a liczba wierszy jest domyślnie ograniczona wysokością dostępnego miejsca. Typ: liczba
Domyślnie automatycznie
|
hAxis.minTextSpacing |
Minimalne odstępy w poziomie (w pikselach) dopuszczalne między 2 przyległymi etykietami tekstowymi. Jeśli etykiety są rozmieszczone zbyt gęsto lub zbyt długie, odstępy mogą spaść poniżej tego progu i w takim przypadku zostanie zastosowany jeden z mechanizmów ułatwiających zachowanie poufności etykiet (na przykład obcięcie etykiet lub usunięcie niektórych z nich). Typ: liczba
Domyślna: wartość
hAxis.textStyle.fontSize . |
hAxis.showTextEvery |
Liczba etykiet osi poziomej do pokazania, gdzie 1 oznacza każdą etykietę, 2 oznacza, że są widoczne wszystkie pozostałe etykiety itd. Domyślnie wyświetlane jest jak najwięcej etykiet bez nakładania się etykiet. Typ: liczba
Domyślne:automatyczne
|
hAxis.viewWindowMode |
Określa, jak skalować oś poziomą, by renderować wartości na obszarze wykresu. Obsługiwane są te wartości ciągów:
Typ: ciąg znaków
Domyślnie: odpowiednik „ładne”. Jednak jeśli są używane, pierwszeństwo mają
haxis.viewWindow.min i haxis.viewWindow.max .
|
hAxis.viewWindow |
Określa zakres przycięcia osi poziomej. Typ: obiekt
Wartość domyślna:null
|
hAxis.viewWindow.max |
Indeks wiersza liczony od zera, na którym kończy się okno przycinania. Punkty danych w tym indeksie i wyższych, zostaną przycięte. W połączeniu z funkcją Ignorowana, gdy atrybut Typ: liczba
Domyślnie automatycznie
|
hAxis.viewWindow.min |
Indeks wiersza liczony od zera, od którego zaczyna się okno przycinania. Punkty danych w indeksach niższych niż ten zostaną przycięte. W połączeniu z funkcją Ignorowana, gdy atrybut Typ: liczba
Domyślnie automatycznie
|
histogram.bucketSize |
Zakoduj na stałe rozmiar każdego słupka histogramu, zamiast zezwalać na jego określanie przez algorytm. Typ: liczba
Domyślnie automatycznie
|
histogram.hideBucketItems |
Pomiń cienkie podziały między blokami histogramu, tworząc serię słupków pełnych. Typ: wartość logiczna
Wartość domyślna: fałsz.
|
histogram.lastBucketPercentile |
Podczas obliczania rozmiaru zasobnika histogramu zignoruj górną i dolną wartość Typ: liczba
Wartość domyślna: 0
|
histogram.minValue |
Rozszerz zakres zasobników, aby uwzględnić tę wartość. Typ: liczba
Domyślnie: automatycznie – użyj min. danych
|
histogram.maxValue |
Rozszerz zakres zasobników, aby uwzględnić tę wartość. Typ: liczba
Domyślne: automatycznie – użyj maks. wartości danych
|
histogram.numBucketsRule |
Jak obliczyć domyślną liczbę zasobników. Możliwe wartości to:
Typ: ciąg znaków
Wartość domyślna:
'sqrt' |
wysokość |
Wysokość wykresu w pikselach. Typ: liczba
Domyślna: wysokość elementu nadrzędnego.
|
interpolateNulls |
Określa, czy odgadnąć wartość brakujących punktów. Jeśli ma wartość true (prawda), odgadnie wartość wszystkich brakujących danych na podstawie sąsiednich punktów. Jeśli ma wartość Fałsz, spowoduje to pozostawienie przerwy w wierszu w nieznanym punkcie.
Ta metoda nie jest obsługiwana w przypadku wykresów warstwowych z opcją Typ: wartość logiczna
Wartość domyślna: fałsz.
|
isStacked |
Jeśli ma wartość Prawda, umieszcza elementy wszystkich serii przy każdej wartości domeny. Uwaga: na wykresach kolumnowych, obszarowych i SteppedArea Wykresy Google odwracają kolejność elementów legendy, by lepiej pasowały do ułożenia elementów serii (np. seria 0 będzie skrajnie skrajnie legendą). To nie dotyczy wykresów słupkowych.
Opcja Opcje
Przy 100% stosów obliczona wartość każdego elementu pojawi się na etykietce po jego rzeczywistej wartości.
Na osi docelowej domyślnie pojawią się wartości zaznaczenia na podstawie względnej skali 0–1 jako ułamków 1 dla
Grupowanie 100% obsługuje tylko wartości danych typu Typ: wartość logiczna/ciąg
Wartość domyślna: fałsz.
|
legenda |
Obiekt z członkami służącymi do konfigurowania różnych aspektów legendy. Aby określić właściwości tego obiektu, możesz użyć notacji literału obiektu, jak pokazano poniżej: {position: 'top', textStyle: {color: 'blue', fontSize: 16}} Typ: obiekt
Wartość domyślna:null
|
legend.alignment |
Wyrównanie legendy. Użyj jednego z tych rodzajów wartości:
Początek, środek i koniec odnoszą się do stylu (pionowego lub poziomego) legendy. Na przykład w legendzie „po prawej” punkty „początek” i „koniec” znajdują się odpowiednio na górze i na dole. W legendzie „góra” wartości „początek” i „koniec” znajdują się odpowiednio po lewej i prawej stronie obszaru. Wartość domyślna zależy od pozycji legendy. Domyślna wartość w legendach „bottom” to „center”, a w innych – „start”. Typ: ciąg znaków
Domyślne:automatyczne
|
legend.maxLines |
Maksymalna liczba wierszy w legendzie. Aby dodać wiersze do legendy, ustaw wartość większą niż 1. Uwaga: dokładna logika używana do określenia rzeczywistej liczby wyrenderowanych wierszy wciąż się zmienia. Obecnie ta opcja działa tylko wtedy, gdy pole legend.position ma wartość „top”. Typ: liczba
Wartość domyślna: 1
|
legend.pageIndex |
Początkowo wybrany indeks stron legendy liczony od zera. Typ: liczba
Wartość domyślna: 0
|
legend.position |
Pozycja legendy. Użyj jednego z tych rodzajów wartości:
Typ: ciąg znaków
Domyślnie: „right”
|
legend.textStyle |
Obiekt określający styl tekstu legendy. Obiekt ma ten format: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Typ: obiekt
Domyślnie:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
orientacja |
Orientacja wykresu. Ustawienie wartości Typ: ciąg znaków
Domyślnie: „poziomo”
|
reverseCategories |
Jeśli zasada ma wartość Prawda, seria jest rysowana od prawej do lewej. Domyślnie rysowanie od lewej do prawej. Typ: wartość logiczna
Wartość domyślna: fałsz.
|
seria |
Tablica obiektów, z których każdy opisuje format odpowiedniej serii na wykresie. Aby użyć wartości domyślnych dla serii, podaj pusty obiekt {}. Jeśli nie określono serii lub wartości, zostanie użyta wartość globalna. Każdy obiekt obsługuje te właściwości:
Możesz podać tablicę obiektów, z których każdy odnosi się do serii w podanej kolejności, albo określić obiekt, w którym każdy element podrzędny ma klucz numeryczny wskazujący, do której serii ma zastosowanie. Na przykład dwie poniższe deklaracje są identyczne. Pierwsza seria jest zadeklarowana jako czarna i nie ma jej w legendzie, a czwarta – jako czerwona i nie ma jej w legendzie: series: [ {color: 'black', visibleInLegend: false}, {}, {}, {color: 'red', visibleInLegend: false} ] series: { 0:{color: 'black', visibleInLegend: false}, 3:{color: 'red', visibleInLegend: false} } Typ: tablica obiektów lub obiektów z zagnieżdżonymi obiektami
Wartość domyślna: {}
|
motyw |
Motyw to zestaw wstępnie zdefiniowanych wartości opcji, które współpracują ze sobą, aby uzyskać określony sposób działania wykresu lub efektu wizualnego. Obecnie dostępny jest tylko 1 motyw:
Typ: ciąg znaków
Wartość domyślna:null
|
tytuł |
Tekst do wyświetlenia nad wykresem. Typ: ciąg znaków
Domyślnie bez tytułu.
|
titlePosition |
Gdzie umieścić tytuł wykresu w porównaniu do obszaru wykresu. Obsługiwane wartości:
Typ: ciąg znaków
Domyślnie: „out”
|
titleTextStyle |
Obiekt, który określa styl tekstu tytułu. Obiekt ma ten format: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Typ: obiekt
Domyślnie:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
etykietka |
Obiekt z elementami służącymi do konfigurowania różnych elementów etykietek. Aby określić właściwości tego obiektu, możesz użyć notacji literału obiektu, jak pokazano poniżej: {textStyle: {color: '#FF0000'}, showColorCode: true} Typ: obiekt
Wartość domyślna:null
|
tooltip.isHtml |
Jeśli ma wartość Prawda, używaj etykietek renderowanych HTML (a nie renderowanych w formacie SVG). Więcej informacji znajdziesz w sekcji Dostosowywanie treści etykietki. Uwaga: wizualizacja wykresu bąbelkowego nie obsługuje dostosowywania zawartości etykietki HTML za pomocą roli danych kolumny etykietki. Typ: wartość logiczna
Wartość domyślna: fałsz.
|
tooltip.showColorCode |
Jeśli ma wartość prawda, obok informacji o serii na etykietce wyświetlaj kolorowe kwadraty. Wartość domyślna to true, gdy Typ: wartość logiczna
Domyślne:automatyczne
|
tooltip.textStyle |
Obiekt, który określa styl tekstu etykietki. Obiekt ma ten format: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Typ: obiekt
Domyślnie:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
tooltip.trigger |
Interakcja użytkownika, która powoduje wyświetlenie etykietki:
Typ: ciąg znaków
Domyślnie: „fokus”
|
vAxes |
Określa właściwości poszczególnych osi pionowych, jeśli wykres ma wiele osi pionowych.
Każdy obiekt podrzędny jest obiektem
Aby określić wykres z wieloma osiami pionowymi, najpierw zdefiniuj nową oś za pomocą funkcji { series: { 2: { targetAxisIndex:1 } }, vAxes: { 1: { title:'Losses', textStyle: {color: 'red'} } } }
Ta właściwość może być obiektem lub tablicą. Obiekt to zbiór obiektów, z których każda ma etykietę liczbową określającą definiowaną oś – jest to format pokazany powyżej. Tablica to tablica obiektów, po jednym na oś. Na przykład ten zapis formatu tablicy jest identyczny z pokazanym powyżej obiektem vAxes: [ {}, // Nothing specified for axis 0 { title:'Losses', textStyle: {color: 'red'} // Axis 1 } ] Typ: tablica obiektów lub obiektów podrzędnych
Wartość domyślna:null
|
vAxis |
Obiekt ze elementami służącymi do konfigurowania różnych elementów osi pionowej. Aby określić właściwości tego obiektu, możesz użyć notacji literału obiektu, jak pokazano poniżej: {title: 'Hello', titleTextStyle: {color: '#FF0000'}} Typ: obiekt
Wartość domyślna:null
|
vAxis.baseline |
Właściwość Typ: liczba
Domyślne:automatyczne
|
vAxis.baselineColor |
Określa kolor punktu odniesienia na osi pionowej. Może to być dowolny ciąg znaków HTML koloru, na przykład Typ: liczba
Domyślny: „black”
|
vAxis.direction |
Kierunek, w którym rosną wartości na osi pionowej. Domyślnie niskie wartości znajdują się na dole wykresu. Określ Typ: 1 lub -1
Wartość domyślna: 1
|
vAxis.format |
Ciąg formatowania etykiet osi liczbowej. To jest podzbiór
zestawu wzorców OIOM
.
Na przykład
Faktyczne formatowanie zastosowane do etykiety jest pobierane z języka, w którym załadowano interfejs API. Więcej informacji znajdziesz w artykule o wczytywaniu wykresów w określonym języku .
Przy obliczaniu wartości znaczników i linii siatki branych jest pod uwagę kilka alternatywnych kombinacji wszystkich odpowiednich opcji linii siatki, a te alternatywne zostaną odrzucone, jeśli sformatowane etykiety znacznika będą się powtarzać lub się nakładać.
Możesz więc określić Typ: ciąg znaków
Domyślnie automatycznie
|
vAxis.gridlines |
Obiekt ze elementami służącymi do konfigurowania linii siatki na osi pionowej. Pamiętaj, że linie siatki na osi pionowej są rysowane poziomo. Aby określić właściwości tego obiektu, możesz użyć notacji literału obiektu, jak pokazano poniżej: {color: '#333', minSpacing: 20} Typ: obiekt
Wartość domyślna:null
|
vAxis.gridlines.color |
Kolor pionowych linii siatki w obszarze wykresu. Podaj prawidłowy ciąg znaków HTML koloru. Typ: ciąg znaków
Domyślnie: „#CCC”.
|
vAxis.gridlines.count |
Przybliżona liczba poziomych linii siatki w obszarze wykresu.
Jeśli podasz liczbę dodatnią dla elementu Typ: liczba
Wartość domyślna: -1
|
vAxis.gridlines.interval |
Tablica rozmiarów (jako wartości danych, a nie pikseli) między sąsiednimi liniami siatki. Ta opcja jest obecnie dostępna tylko w przypadku osi liczbowych, ale jest ona podobna do opcji Typ: liczba od 1 do 10 (bez 10).
Wartość domyślna: obliczone.
|
vAxis.gridlines.minSpacing |
Minimalna przestrzeń ekranu (w pikselach) między głównymi liniami siatki na osi HAx.
Wartość domyślna głównych linii siatki to Typ: liczba
Wartość domyślna: obliczone.
|
vAxis.gridlines.multiple |
Wszystkie wartości linii siatki i znaczników muszą być wielokrotnościami wartości tej opcji. Pamiętaj, że w przeciwieństwie do interwałów potęga dziesięciokrotnej wielokrotności nie jest uwzględniana.
Możesz więc wymuszać, aby znaczniki były liczbami całkowitymi, określając wartość Typ: liczba
Wartość domyślna: 1
|
vAxis.gridlines.units |
Zastępuje domyślny format różnych aspektów typów danych daty, daty, godziny i godziny, gdy są używane z liniami siatki obliczonymi na wykresie. Umożliwia formatowanie lat, miesięcy, dni, godzin, minut, sekund i milisekund. Ogólny format to: gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]}, hours: {format: [/*format strings here*/]}, minutes: {format: [/*format strings here*/]}, seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]} } } Więcej informacji znajdziesz w sekcji Daty i godziny. Typ: obiekt
Wartość domyślna:null
|
vAxis.minorGridlines |
Obiekt z elementami umożliwiającymi konfigurowanie podrzędnych linii siatki na osi pionowej, podobnie jak w przypadku opcji vAxis.gridlines. Typ: obiekt
Wartość domyślna:null
|
vAxis.minorGridlines.color |
Kolor pionowych podrzędnych linii siatki w obszarze wykresu. Podaj prawidłowy ciąg znaków HTML koloru. Typ: ciąg znaków
Domyślny: połączenie koloru linii siatki i koloru tła.
|
vAxis.minorGridlines.count |
Opcja MinGridlines.count jest obecnie głównie wycofywana. Wyjątkiem jest wyłączanie podrzędnych linii siatki przez ustawienie wartości licznika na 0. Liczba mniejszych linii siatki zależy od odstępu między głównymi liniami siatki (patrz: vAxis.gridlines.interval) i minimalnej wymaganej przestrzeni (patrz vAxis.minorGridlines.minSpacing). Typ: liczba
Wartość domyślna: 1
|
vAxis.minorGridlines.interval |
Opcja MinGridlines.interval jest podobna do opcji interwału większych linii siatki, ale wybrany przedział będzie zawsze równy dzielnikowi większej linii siatki.
Domyślny interwał dla skal liniowych to Typ: liczba
Wartość domyślna: 1
|
vAxis.minorGridlines.minSpacing |
Minimalna wymagana ilość miejsca (w pikselach) między sąsiednimi mniejszymi liniami siatki oraz między mniejszymi i głównymi liniami siatki. Wartość domyślna to 1/2 minSpacing głównych linii siatki dla skal liniowych i 1/5 minSpacing dla skal logicznych. Typ: liczba
Default (wartość domyślna): obliczone
|
vAxis.minorGridlines.multiple |
Tak samo jak w przypadku głównych Typ: liczba
Wartość domyślna: 1
|
vAxis.minorGridlines.units |
Zastępuje domyślny format różnych aspektów danych typu data, godzina i godzina w przypadku używania z wykresami podrzędnymi obliczonymi na wykresie. Umożliwia formatowanie lat, miesięcy, dni, godzin, minut, sekund i milisekund. Ogólny format to: gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]} hours: {format: [/*format strings here*/]} minutes: {format: [/*format strings here*/]} seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]}, } } Więcej informacji znajdziesz w sekcji Daty i godziny. Typ: obiekt
Wartość domyślna:null
|
vAxis.logScale |
Jeśli ma wartość prawda, oś pionowa jest skalą logarytmiczną. Uwaga: wszystkie wartości muszą być dodatnie. Typ: wartość logiczna
Wartość domyślna: fałsz.
|
vAxis.scaleType |
Właściwość
Typ: ciąg znaków
Wartość domyślna:null
|
vAxis.textPosition |
Położenie tekstu na osi pionowej względem obszaru wykresu. Obsługiwane wartości: „out”, „in”, „none”. Typ: ciąg znaków
Domyślnie: „out”
|
vAxis.textStyle |
Obiekt określający styl tekstu osi pionowej. Obiekt ma ten format: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Typ: obiekt
Domyślnie:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
vAxis.ticks |
Zastępuje automatycznie wygenerowane znaczniki osi Y określoną tablicą. Każdy element tablicy powinien być prawidłową wartością znacznika (np. liczba, data, data i godzina lub godzina) albo obiektem. Jeśli jest to obiekt, powinien mieć właściwość
Pole viewWindow zostanie automatycznie rozwinięte i będzie zawierać minimalną i maksymalną liczbę taktów, chyba że określisz Przykłady:
Typ: tablica elementów.
Domyślnie automatycznie
|
vAxis.title |
Właściwość Typ: ciąg znaków
Domyślnie bez tytułu.
|
vAxis.titleTextStyle |
Obiekt określający styl tekstu tytułu osi pionowej. Obiekt ma ten format: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Typ: obiekt
Domyślnie:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
vAxis.maxValue |
Przenosi maksymalną wartość osi pionowej do określonej wartości. Na większości wykresów wartość ta będzie wyższa. Ignorowana, jeśli ustawiona jest wartość mniejsza niż maksymalna wartość „y” danych.
Typ: liczba
Domyślne:automatyczne
|
vAxis.minValue |
Przenosi minimalną wartość osi pionowej do określonej wartości. Na większości wykresów będzie to zmiana w dół. Ignorowana, jeśli ustawiona jest wartość większa niż minimalna wartość y danych.
Typ: liczba
Wartość domyślna:null
|
vAxis.viewWindowMode |
Określa, jak skalować oś pionową, by renderować wartości na obszarze wykresu. Obsługiwane są te wartości ciągów:
Typ: ciąg znaków
Domyślnie: odpowiednik „ładne”. Jednak jeśli są używane, pierwszeństwo mają
vaxis.viewWindow.min i vaxis.viewWindow.max .
|
vAxis.viewWindow |
Określa zakres przycięcia osi pionowej. Typ: obiekt
Wartość domyślna:null
|
vAxis.viewWindow.max |
Maksymalna wartość danych pionowych do renderowania. Ignorowana, gdy atrybut Typ: liczba
Domyślnie automatycznie
|
vAxis.viewWindow.min |
Minimalna wartość danych pionowych do renderowania. Ignorowana, gdy atrybut Typ: liczba
Domyślnie automatycznie
|
szerokość |
Szerokość wykresu w pikselach. Typ: liczba
Domyślna: szerokość elementu nadrzędnego.
|
Metody
Metoda | |
---|---|
draw(data, options) |
Rysuje wykres. Wykres akceptuje kolejne wywołania metod dopiero po wywołaniu zdarzenia Return Type: brak
|
getAction(actionID) |
Zwraca obiekt działania etykietki z żądanym obiektem Return Type: (Typ zwracania): obiekt
|
getBoundingBox(id) |
Zwraca obiekt zawierający lewo, górę, szerokość i wysokość elementu wykresu
Wartości odnoszą się do kontenera wykresu. Wywołuj je po narysowaniu wykresu. Return Type: (Typ zwracania): obiekt
|
getChartAreaBoundingBox() |
Zwraca obiekt zawierający lewo, górę, szerokość i wysokość zawartości wykresu (tj. bez etykiet i legendy):
Wartości odnoszą się do kontenera wykresu. Wywołuj je po narysowaniu wykresu. Return Type: (Typ zwracania): obiekt
|
getChartLayoutInterface() |
Zwraca obiekt zawierający informacje o pozycji na ekranie wykresu i jego elementów. W przypadku zwróconego obiektu można wywołać te metody:
Wywołuj je po narysowaniu wykresu. Return Type: (Typ zwracania): obiekt
|
getHAxisValue(xPosition, optional_axis_index) |
Zwraca poziomą wartość danych w punkcie Przykład: Wywołuj je po narysowaniu wykresu. Return Type: (Typ zwrotu): liczba
|
getImageURI() |
Zwraca wykres zserializowany jako identyfikator URI obrazu. Wywołuj je po narysowaniu wykresu. Zobacz Drukowanie wykresów PNG. Return Type: (Typ zwracania): ciąg znaków
|
getSelection() |
Zwraca tablicę wybranych elementów wykresu.
Elementy, które można wybrać, to paski, wpisy z legendy i kategorie.
Na tym wykresie w danym momencie można wybrać tylko 1 element.
Return Type: tablica elementów zaznaczenia.
|
getVAxisValue(yPosition, optional_axis_index) |
Zwraca pionową wartość danych przy Przykład: Wywołuj je po narysowaniu wykresu. Return Type: (Typ zwrotu): liczba
|
getXLocation(dataValue, optional_axis_index) |
Zwraca współrzędną X piksela dla elementu Przykład: Wywołuj je po narysowaniu wykresu. Return Type: (Typ zwrotu): liczba
|
getYLocation(dataValue, optional_axis_index) |
Zwraca współrzędną Y piksela ( Przykład: Wywołuj je po narysowaniu wykresu. Return Type: (Typ zwrotu): liczba
|
removeAction(actionID) |
Usuwa z wykresu działanie etykietki z żądanym elementem Typ zwrotu:
none |
setAction(action) |
Ustawia działanie etykietki, które ma być wykonywane po kliknięciu tekstu działania przez użytkownika.
Metoda
Przed wywołaniem metody Typ zwrotu:
none |
setSelection() |
Wybiera określone elementy wykresu. Anuluje wcześniejszy wybór.
Elementy, które można wybrać, to paski, wpisy z legendy i kategorie.
Na tym wykresie można wybrać tylko 1 element naraz.
Return Type: brak
|
clearChart() |
Czyści wykres i zwalnia wszystkie przydzielone Ci zasoby. Return Type: brak
|
Zdarzenia
Więcej informacji o korzystaniu z tych zdarzeń znajdziesz w artykułach Podstawowa interaktywność, Obsługa zdarzeń i Uruchamianie zdarzeń.
Nazwa | |
---|---|
animationfinish |
Uruchamiane po zakończeniu animacji przejścia. Właściwości: brak
|
click |
Uruchamiane, gdy użytkownik kliknie wykres. Pozwala określić, kiedy klikane są tytuł, elementy danych, wpisy legendy, osie, linie siatki lub etykiety. Właściwości: targetID
|
error |
Uruchamiane, gdy podczas próby wyrenderowania wykresu wystąpi błąd. Właściwości: identyfikator, komunikat
|
legendpagination |
Uruchamiane, gdy użytkownik kliknie strzałki podziału na strony w legendzie. Zwraca bieżący indeks stron legendy liczony od zera oraz łączną liczbę stron. Właściwości: currentPageIndex, totalPages
|
onmouseover |
Uruchamiane, gdy użytkownik najedzie kursorem na element wizualny. Przekazuje z powrotem indeksy wierszy i kolumn odpowiedniego elementu tabeli danych. Słupek odpowiada komórce w tabeli danych, wpisowi legendy o kolumnie (indeks wiersza ma wartość null), a kategorię – wierszowi (indeks kolumny ma wartość null). Właściwości: wiersz, kolumna
|
onmouseout |
Uruchamiane, gdy użytkownik najedzie kursorem poza obiekt wizualny. Przekazuje z powrotem indeksy wierszy i kolumn odpowiedniego elementu tabeli danych. Słupek odpowiada komórce w tabeli danych, wpisowi legendy o kolumnie (indeks wiersza ma wartość null), a kategorię – wierszowi (indeks kolumny ma wartość null). Właściwości: wiersz, kolumna
|
ready |
Wykres jest gotowy do obsługi wywołań metod zewnętrznych. Jeśli chcesz korzystać z wykresu i metod wywołań po jego narysowaniu, skonfiguruj detektor tego zdarzenia przed wywołaniem metody Właściwości: brak
|
select |
Uruchamiane, gdy użytkownik kliknie element wizualny. Aby dowiedzieć się, co zostało wybrane, zadzwoń pod numer Właściwości: brak
|
Zasady dotyczące danych
Cały kod i dane są przetwarzane i renderowane w przeglądarce. Żadne dane nie są wysyłane na żaden serwer.