Pierwsze kroki z wykresami

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

Żółty wykres kołowy

https://chart.googleapis.com/chart?
  cht=p3&
  chs=250x100&
  chd=t:60,40&
  chl=Hello|World
https://chart.googleapis.com/chart?
To jest podstawowy URL dla wszystkich żądań wykresu.
cht=p3
Typ wykresu: tutaj – wykres kołowy 3D.
chs=250x100
Rozmiar wykresu (szerokość x wysokość) w pikselach. Maksymalne wartości znajdziesz tutaj.
chd=t:60,40
Dane z wykresu. Są to dane w prostym formacie tekstowym, ale są też inne formaty.
chl=Hello|World
Etykiety wycinków.
&
Parametry są oddzielone znakiem „&”. Uwaga: podczas umieszczania adresu URL w kodzie HTML, np. jako atrybutu src tagu <img>, należy zastąpić & między parametrami znakami. &amp; Dotyczy to również generowania kodu HTML stron za pomocą języka PHP lub innego języka. Jednak podczas wpisywania adresu URL w przeglądarce lub wywołania go w kodzie, np. przy pobieraniu adresu w języku PHP lub Perl, należy stosować znak &.

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.

Powrót do góry

Jak utworzyć wykres

Aby utworzyć wykres graficzny:

  1. 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.
  2. 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.
  3. Określ rozmiar wykresu. Rozmiar wykresu jest określany za pomocą parametru chs. Format i maksymalne wartości znajdziesz w dokumentacji.
  4. 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ą parametru chm możesz umieszczać kształty w wielu punktach danych, ale w tym celu nie musisz wielokrotnie określać parametru chm 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 przypadku chm 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.
  5. 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 &amp;. Przykład: <img src="https://chart.googleapis.com/chart?chs=250x100&amp;chd=t:60,40&amp;cht=p3&amp;chl=Hello|World" />.
  6. 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.
  7. 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.

Powrót do góry

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:
Wykres słupkowy przedstawiający 2 serie: Koty i Psy.
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:

Różne regiony 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, gdzie chxt to nazwa parametru, a x 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.

Powrót do góry

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).