Na tej stronie opisujemy podstawy korzystania z interfejsu Chart API do tworzenia wykresów.
Zasady korzystania z usługi Wykres Google
Nie ma ograniczeń co do dziennej liczby wywołań interfejsu Google Chart API. Zastrzegamy sobie jednak prawo do zablokowania wykorzystania, które uznamy za nadużycie.
Opis
Wyświetlanie wykresów w tej dokumentacji
Wszystkie obrazy wykresów w tej dokumentacji są generowane na żywo za pomocą interfejsu Chart API. Aby wyświetlić adres URL dowolnego obrazu, wykonaj te czynności:
- Jeśli używasz Firefoksa, kliknij prawym przyciskiem myszy i wybierz polecenie „View Image” (Wyświetl obraz) lub „Properties” (Właściwości).
- Jeśli używasz przeglądarki Internet Explorer, kliknij ją prawym przyciskiem myszy i wybierz „Właściwości”.
Aby ułatwić czytanie adresu URL, dokument jest często wyświetlany w wielu wierszach. W przypadku używania interfejsu Google Chart API należy podać adres URL w jednym wierszu.
Interfejs Google Chart API zwraca obraz wykresu w odpowiedzi na żądanie GET lub POST z adresu URL. Interfejs API może generować wiele rodzajów wykresów, od wykresów kołowych i liniowych po kody QR i formuły. Wszystkie informacje o wykresie, którego potrzebujesz, np. dane wykresu, rozmiar, kolory i etykiety, są częścią adresu URL. W przypadku żądań POST wygląda to trochę inaczej, ale nie martw się tym.
Aby utworzyć najprostszy wykres, w adresie URL musisz określić tylko typ wykresu, dane i rozmiar. Możesz wpisać ten adres URL bezpośrednio w przeglądarce lub wskazać go za pomocą tagu <img>
na stronie internetowej. Na przykład link do wykresu kołowego:
https://chart.googleapis.com/chart?chs=250x100&chd=t:60,40&cht=p3&chl=Hello|World
Poprzedni link to przykład podstawowego adresu URL interfejsu Chart API. Wszystkie adresy URL z wykresu mają ten format:
https://chart.googleapis.com/chart?cht=<chart_type>&chd=<chart_data>&chs=<chart_size>&...additional_parameters...
Wszystkie adresy URL zaczynają się od ciągu https://chart.googleapis.com/chart?
, po którym następuje parametry określające dane i wygląd wykresu. Parametry to pary nazwa=wartość rozdzielone znakiem ampersand (&
), a parametry mogą mieć dowolną kolejność po ?
. Wszystkie wykresy wymagają przynajmniej tych parametrów: cht
(typ wykresu), chd
(dane) i chs
(rozmiar wykresu). Istnieje jednak znacznie więcej parametrów dodatkowych opcji. Możesz też określić tyle parametrów dodatkowych, ile obsługuje wykres.
Przyjrzyjmy się bardziej szczegółowo powyższemu adresowi URL:
URL | Komponenty |
---|---|
|
|
Skopiuj i wklej ten adres URL w przeglądarce i spróbuj wprowadzić kilka zmian: dodaj kolejne wartości do danych (nie zapomnij o rozdzielaniu przecinkami przed każdą nową wartością danych). Dodaj nowe etykiety (umieść znak |
przed każdą nową wartością). Powiększ wykres.
Jak utworzyć wykres
Aby utworzyć wykres graficzny:
- Wybierz typ wykresu. Listę wykresów znajdziesz w galerii. Typ wykresu jest określany przez parametr
cht
. Szkicuj wszystkie komponenty, które chcesz umieścić na wykresie (osie, etykiety, tła itd.). W razie potrzeby oblicz wymiary w pikselach dla poszczególnych komponentów (łączny rozmiar wykresu, rozmiar legendy itd.). Najpierw dokładnie zapoznaj się z dokumentacją danego typu wykresu, ponieważ może to być frustrujące. - Tworzenie i formatowanie danych wykresu Dane określa się za pomocą parametru
chd
. Musisz wybrać format danych:- Wybierz format danych. W przypadku danych z wykresu możesz użyć prostego formatu tekstowego, który jest łatwy do odczytania, ale zajmuje więcej miejsca do wysłania, albo użyć jednego z typów kodowania, które pozwala mniej wysyłać, ale ogranicza zakres wartości.
- Zdecyduj, czy dane muszą być skalowane, aby można było zmieścić się na wykresie Różne formaty obsługują różne zakresy wartości. Aby ujednolicić dane, możesz tak skalować dane, aby obejmowały pełny zakres wartości dozwolonych przez Twój format. Możesz to zrobić, skalując dane tak, aby pasowały do używanego formatu danych, lub możesz użyć formatowania tekstu ze skalowaniem niestandardowym.
- W razie potrzeby zakoduj dane. Jeśli wybierzesz zakodowany format, udostępniamy kod JavaScript, który pomaga z innymi typami kodowania.
- Określ rozmiar wykresu. Rozmiar wykresu jest określany za pomocą parametru
chs
. Format i maksymalne wartości znajdziesz w dokumentacji. - Dodaj kolejne parametry. W dokumentacji każdego wykresu znajdziesz listę dostępnych parametrów opcjonalnych. Typowe opcje to etykiety, tytuły i kolory. Pamiętaj, że cały tekst etykiet i tytułów musi być zakodowany w formacie UTF-8. Pamiętaj, że wiele parametrów umożliwia wpisanie wielu wartości. Na przykład parametr
chm
umożliwia umieszczenie kształtu na wykresie w jednym punkcie danych. Za pomocą parametruchm
możesz umieszczać kształty w wielu punktach danych, ale w tym celu nie musisz wielokrotnie określać parametruchm
w adresie URL (np. WRONG:chm=square&chm=circle&chm=triangle
). Zamiast tego parametry, które przyjmują wiele wartości, używają separatora, takiego jak przecinek lub kreska pionowa, między wieloma wartościami tego samego parametru. W przypadkuchm
jest to słupek, więc zobaczysz coś takiego: RIGHT:chm=square|circle|triangle
. Aby dowiedzieć się, jak określić wiele parametrów, zapoznaj się ze szczegółami poszczególnych parametrów. - Utwórz ciąg adresu URL. Adres URL zaczyna się od
https://chart.googleapis.com/chart?
, po którym znajdują się wszystkie wymagane (cht
,chd
,chs
) i opcjonalne parametry. Uwaga: jeśli używasz adresu URL w tagu<img>
, musisz zmienić wszystkie znaki&
w linku na&
. Przykład:<img src="https://chart.googleapis.com/chart?chs=250x100&chd=t:60,40&cht=p3&chl=Hello|World" />
. - Aby pobrać obraz, użyj metody GET lub POST. GET: polega na wpisaniu adresu URL bezpośrednio w przeglądarce lub użyciu go w tagu
<img>
. Adresy URL mogą mieć jednak długość do 2 KB, więc jeśli masz więcej danych lub chcesz uzyskać krew, rozważ użycie metody POST w sposób opisany tutaj. - Utwórz regiony, które można kliknąć. Opcjonalnie możesz utworzyć mapę obrazu wykresu, która pozwoli Ci dodawać hiperlinki lub klikaj elementy do określonych elementów wykresu. Więcej informacji znajdziesz w temacie Tworzenie mapy obrazu wykresu.
Słowniczek terminów związanych z listami przebojów
Oto kilka ważnych terminów używanych w tej dokumentacji:
- Seria
- Powiązany zbiór danych na wykresie.
To, co składa się na serię, zależy od typu wykresu: na wykresie liniowym seria jest pojedynczą linią; na wykresie kołowym każdy wpis jest wycinkiem, a wszystkie wycinki razem to seria. Na wykresie słupkowym seria składa się ze wszystkich słupków z tego samego zbioru danych. W zależności od typu wykresu słupkowego różne serie są grupowane obok siebie lub ułożone skumulowane. Poniższy wykres przedstawia pogrupowany wykres słupkowy z 2 serią – jedną w ciemnoniebieskim kolorze, a drugim w kolorze jasnoniebieskim:
- Etykiety osi
- Wartości liczbowe lub tekstowe na każdej osi. Na poprzednim wykresie powinny to być etykiety „Sty”, „Lut”, „Mar”, „0”, „50”, „100”.
Komponenty wykresu
Oto niektóre elementy wykresu:
- Obszar wykresu
- Obszar z grafiką serialu. Więcej informacji znajdziesz na pasku bocznym „Komponenty wykresu”.
- Legenda
- Niewielki obszar na wykresie opisujący serię. Na wykresie powyżej ta sekcja zawiera pozycje „Koty” i „Psy”.
- Parametr
- Para klucz=wartość używana w adresie URL. Na przykład:
chxt=x
, gdziechxt
to nazwa parametru, ax
to wartość parametru. - GET i POST
- 2 metody wysłania adresu URL wykresu. Metoda GET polega zwykle na wpisaniu adresu URL w przeglądarce lub przez ustawienie go jako źródła tagu
<img>
. Żądania POST są bardziej złożone, ale mogą zawierać znacznie więcej danych. Głównym powodem, dla którego warto używać metody POST zamiast GET, jest to, że może ono pobrać znacznie więcej danych niż żądanie GET (16 tys. znaków zamiast 2000 znaków). Funkcja POST jest opisana tutaj. - Znak rurki
- Znak
|
, często używany jako separator wartości parametru, czyli znak służący do podziału wielu wartości. Przecinki i znaki „&” są też używane jako separatory w adresie URL wykresu. - Wykresy złożone
- Wykres łączący 2 różne typy: np. słupkowy z linią lub liniowy ze znacznikami świecowymi. Zobacz Wykresy złożone.
Optymalizacje
Po zapoznaniu się z podstawami tworzenia wykresów zapoznaj się teraz z kilkoma optymalizacjami, których możesz użyć.
Korzystanie z metody POST
Adresy URL są ograniczone do długości 2 KB, więc jeśli Twój wykres zawiera więcej danych, użyj metody POST zamiast GET, jak opisano tutaj. Polecenie GET polega na wpisaniu adresu URL wykresu w pasku adresu przeglądarki lub użycia go jako źródła elementu <img>
na stronie internetowej. POST wymaga dodatkowego programowania w innym języku, takim jak PHP lub PERL.
Tworzenie wykresów w języku JavaScript
Aby utworzyć wykresy graficzne, możesz użyć interfejsu Google uniknąć interfejsu API. Interfejs GoogleVisual API to oparty na języku JavaScript interfejs API, który udostępnia narzędzia do tworzenia, filtrowania i manipulowania danymi oraz do wysyłania zapytań o dane do arkuszy kalkulacyjnych Google lub innych witryn. Możesz utworzyć dane za pomocą interfejsu API wizualizacji, a potem wywołać interfejs Image Charts API, aby wyrenderować wykres na stronie. Więcej informacji znajdziesz w dokumentacji ogólnego wykresu graficznego lub w galerii wizualizacji zawierającej wykresy Google oznaczone (za pomocą obrazu).