Ważne: 20 kwietnia 2012 r. część Grafiki na wykresach została oficjalnie wycofana. Będzie nadal działać zgodnie z naszymi zasadami wycofywania.
Omówienie
Ogólny wykres graficzny to ogólny kod towarzyszący wszystkich wykresów generowanych przez Google Chart API. Zanim spróbujesz użyć tej wizualizacji, zapoznaj się z dokumentacją interfejsu Chart API. W ramach tej wizualizacji możesz wysłać maksymalnie 16 tys. danych, w przeciwieństwie do limitu 2 tys. bezpośrednich wywołań interfejsu Chart API.
Wszystkie dane są przekazywane do wykresów za pomocą DataTable lub DataView. Dodatkowo niektóre etykiety są przekazywane jako kolumny w tabeli danych.
Wszystkie inne parametry adresu URL interfejsu Chart API (oprócz chd
) są przekazywane jako opcje.
Autor: Google
Przykłady
Oto przykłady kilku różnych typów wykresów.
Wykres liniowy
<html> <head> <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script> <script type='text/javascript'> google.charts.load("current", {packages:["imagechart"]}); </script> <script type='text/javascript'> google.charts.setOnLoadCallback(drawChart); function drawChart() { var dataTable = new google.visualization.DataTable(); dataTable.addColumn('string'); dataTable.addColumn('number'); dataTable.addColumn('string'); // Row data is [chl, data point, point label] dataTable.addRows([ ['January',40,undefined], ['February',60,'Initial recall'], ['March',60,'Product withdrawn'], ['April',45,undefined], ['May',47,'Relaunch'], ['June',75,undefined], ['July',70,undefined], ['August',72,undefined] ]); var options = {cht: 'lc', chds:'0,160', annotationColumns:[{column:2, size:12, type:'flag', priority:'high'},]}; var chart = new google.visualization.ImageChart(document.getElementById('line_div')); chart.draw(dataTable, options); } </script> </head> <body> <div id='line_div'></div> </body> </html>
Pionowy wykres słupkowy
Pamiętaj, że na opakowanych wykresach słupkowych nie trzeba określać parametru chxt='x' tak, jakby to było w przypadku samodzielnego wywoływania wykresu. Jeśli nie podasz osi, W ogólnym wykresie graficznym nastąpi domyślne skonfigurowanie wykresu.
<html> <head> <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script> <script type='text/javascript'> google.charts.load("current", {packages:["imagechart"]}); </script> <script type='text/javascript'> google.charts.setOnLoadCallback(drawChart); function drawChart() { var dataTable = new google.visualization.DataTable(); dataTable.addColumn('number'); dataTable.addColumn('number'); dataTable.addRows([ [10,50], [50,60], [60,100], [80,40], [40,20] ]); var options = {cht: 'bvs', chs: '300x125', colors:['#4D89F9','#C6D9FD'], chds:'0,160', chxl:'0:|oranges|apples|pears|bananas|kiwis|'}; var chart = new google.visualization.ImageChart(document.getElementById('bar_div')); chart.draw(dataTable, options); } </script> </head> <body> <div id='bar_div'></div> </body> </html>
Wykres kołowy
<html> <head> <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script> <script type='text/javascript'> google.charts.load("current", {packages:["imagechart"]}); </script> <script type='text/javascript'> google.charts.setOnLoadCallback(drawChart); function drawChart() { var dataTable = new google.visualization.DataTable(); dataTable.addColumn('string'); dataTable.addColumn('number'); dataTable.addRows([ ['January',12], ['February',8], ['March',3] ]); var options = {cht: 'p', title: 'Sales per Month', chp: 0.628, chs: '400x200', colors:['#3399CC','#00FF00','#0000FF']}; var chart = new google.visualization.ImageChart(document.getElementById('pie_div')); chart.draw(dataTable, options); } </script> </head> <body> <div id='pie_div'></div> </body> </html>
Wykres radarowy
<html> <head> <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script> <script type='text/javascript'> google.charts.load("current", {packages:["imagechart"]}); </script> <script type='text/javascript'> google.charts.setOnLoadCallback(drawChart); function drawChart() { var dataTable = new google.visualization.DataTable(); dataTable.addColumn('number'); dataTable.addColumn('number'); dataTable.addRows([ [100,10], [80,20], [60,30], [30,40], [25,50], [20,60], [10,70] ]); var chart = new google.visualization.ImageChart(document.getElementById('radar_div')); var options = {cht: 'rs', chco: '00FF00,FF00FF', chg: '25.0,25.0,4.0,4.0', chm: 'B,FF000080,0,1.0,5.0|B,FF990080,1,1.0,5.0',}; chart.draw(dataTable, options); } </script> </head> <body> <div id='radar_div'></div> </body> </html>
Wykres mapy
<html> <head> <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script> <script type='text/javascript'> google.charts.load("current", {packages:["imagechart"]}); </script> <script type='text/javascript'> google.charts.setOnLoadCallback(drawChart); function drawChart() { var dataTable = new google.visualization.DataTable(); dataTable.addColumn('string'); dataTable.addColumn('number'); dataTable.addRows([ ['DZ',0], ['EG',50], ['MG',50], ['GM',35], ['KE',100], ['ZA',100] ]); var options = {cht: 't', chtm: 'africa', chco: '777777,FFC6A5,FF0000', chs: '440x220'}; var chart = new google.visualization.ImageChart(document.getElementById('map_div')); chart.draw(dataTable, options); } </script> </head> <body> <div id='map_div'></div> </body> </html>
Wczytuję
Nazwa pakietu google.charts.load
to „imagegraph”.
google.charts.load('current', {'packages': ['imagechart']});
Nazwa klasy wizualizacji to google.visualization.ImageChart
var visualization = new google.visualization.ImageChart(container_div);
Format danych
Istnieją 2 ogólne formaty danych: jeden dla wykresów map i jeden dla pozostałych. Jedynym formatem liczbowym obsługiwanym przez dane jest typ numeru JavaScript.
Uwaga: nie koduj żadnych wartości ciągu znaków przekazywanych jako dane lub opcje.
Wykresy map
Wykres mapy pobiera tabelę danych z 2 wymaganymi kolumnami:
- Pierwsza kolumna – [ciąg znaków] Kod kraju lub województwa/prowincji.
- Druga kolumna – [liczba] Wartość dla tego kraju lub stanu.
Więcej informacji znajdziesz w dokumentacji wykresu mapy.
Wykresy inne niż mapy
Wykresy inne niż mapowe korzystają z tabeli danych z 2 opcjonalnymi kolumnami (na początku i na końcu) oraz co najmniej 1 kolumną z danymi:
- Pierwsza kolumna – [opcjonalny ciąg znaków] reprezentuje etykietę
na osi X (odpowiada parametrowi
chl
lubchxl
) wykresów, które obsługują ten wykres. - Następne kolumny – dowolna liczba kolumn liczbowych, z których każda reprezentuje serię danych.
- Ostatnie kolumny – [opcjonalne, ciąg] Dowolna liczba kolumn z ciągami
za kolumnami danych, przy czym każdy wpis reprezentuje etykietę punktu danych dla wykresów, które go obsługują. Jeśli chcesz używać tej kolumny, musisz określić opcję
annotationColumns
.
Dane będą wyświetlane w różny sposób, w zależności od typu wykresu. Zapoznaj się z dokumentacją wykresu.
Uwaga na temat indeksów kolumn: przed wysłaniem tabeli do usługi Chart API wizualizacja wykresu obrazu standardowego usuwa kolumny ciągu znaków z tabeli danych. Oznacza to, że indeksy kolumn dostępne w opcjach, metodach i zdarzeniach zdefiniowane na tej stronie obejmują kolumny z numerami indeksów. Indeksy kolumn w dowolnych opcjach obsługiwanych przez usługę Chart API (np. opcja chm
) ignorują kolumny ciągu w liczbie indeksów.
Opcje konfiguracji
Dla tej wizualizacji są zdefiniowane poniższe opcje. Zdefiniuj je w obiekcie opcji przekazywanym w metodzie draw()
wizualizacji.
Nie wszystkie wymienione niżej typy są obsługiwane. Zapoznaj się z dokumentacją statycznego typu wykresu. Jako parametr możesz przekazać dowolny parametr adresu URL Chart API. Na przykład parametr adresu URL chg=50,50
z wizualizacji wykresu został określony w ten sposób: options['chg'] = '50,50'
.
Uwaga na temat kolorów: opcje kolorów, takie jak colors
, color
i backgroundColor
, są określone w formacie koloru interfejsu Chart API.
Format jest podobny do formatu #RRGGBB, ale zawiera opcjonalną wartość szesnastkową, która wskazuje przezroczystość. Kolory czytelne dla człowieka, takie jak „czerwony”, „zielony”, „niebieski” nie są obsługiwane. Format koloru interfejsu Chart API nie zawiera początkowego symbolu #, ale ogólne opcje wizualizacji wykresów obrazu akceptują kody kolorów z znakiem # lub bez niego.
Nazwa | Typ | Domyślna | Opis |
---|---|---|---|
Kolumny adnotacji | Tablica<object> | brak | Etykiety punktów danych do różnych typów wykresów. Jest to tablica obiektów, z których każdy używa sformatowanej etykiety do jednego punktu danych na wykresie. Ta opcja jest dostępna tylko w przypadku wykresów, które obsługują punkty danych (więcej informacji znajdziesz w połączonym temacie), a tabela danych musi zawierać co najmniej 1 kolumnę z etykietami etykiet. Każdy obiekt w tablicy ma te właściwości:
Przykład: ten fragment kodu zawiera czarną, 12-pikselową etykietę tekstową, z tekstem wpisanym w kolumnie 0 i przypisanym do punktu danych w kolumnie 2 w tym samym wierszu: |
backgroundColor, | tekst | „#FFFFFF” (biały) | Kolor tła wykresu w formacie koloru interfejsu Chart API. |
kolor | tekst | Automatycznie | Określa kolor podstawowy, który ma być używany w przypadku wszystkich serii. Każda seria będzie gradacją wybranego koloru. Kolory są określane w formacie koloru Chart API.
Ignorowane, jeśli określono właściwość colors . |
kolory | Tablica<string> | Automatycznie | Użyj tej opcji, aby przypisać konkretne kolory do każdej serii danych. Kolory są określane w formacie koloru interfejsu Chart API.
Kolor i jest używany w kolumnie danych i, a jeśli jest więcej kolumn danych niż kolory, dochodzi do początku. Jeśli wszystkie wersje jednego koloru są dopuszczalne dla wszystkich serii, użyj opcji color . |
włączanie zdarzeń | wartość logiczna | fałsz | Powoduje, że wykresy powodują zdarzenia wywoływane przez użytkowników, takie jak kliknięcie lub przesunięcie kursora myszy. Obsługiwane tylko w przypadku określonych typów wykresów. Patrz Wydarzenia poniżej. |
fill | wartość logiczna | fałsz | Jeśli ma wartość true (prawda), wypełni obszar pod każdą linią. Dostępne tylko w przypadku wykresów liniowych. |
pierwsza ukryta kolumna | liczba | brak | Indeks kolumny danych. Kolumna podana wraz z wszystkimi kolejnymi kolumnami nie będzie używana do rysowania głównych elementów serii (np. linii na wykresie liniowym czy słupkowych), ale będzie służyć jako dane dla znaczników i innych adnotacji. Pamiętaj, że ta liczba indeksów obejmuje kolumny z ciągami znaków. |
wysokość | liczba | 200 | Wysokość wykresu w pikselach. Jeśli nie ma go lub nie ma w akceptowanym zakresie, stosowana jest wysokość elementu, który go zawiera. Jeśli będzie się też przekracza akceptowalny zakres, zostanie użyta wysokość domyślna. |
etykiety | tekst | „brak” | [Tylko wykres kołowy] Etykieta (jeśli jest widoczna) dla każdego wycinka. Wybierz jedną z tych wartości:
|
legenda | tekst | „w prawo” | Gdzie wyświetlić legendę wykresu względem wykresu? Określ jedną z tych wartości: „top”, „bottom”, „left”, „right” lub „none”. Ignorowane na wykresach bez legend (np. na mapach). |
maks. | liczba | Maksymalna wartość danych | Maksymalna wartość wyświetlana na wadze. Ignorowany w przypadku wykresów kołowych. Wartość domyślna to maksymalna wartość danych z wyjątkiem wykresów słupkowych, gdzie domyślna wartość to maksymalna wartość danych. Jest ona ignorowana w przypadku wykresów słupkowych, gdy tabela ma więcej niż 1 kolumnę danych. |
minuta | liczba | Wartość danych mimimu | Minimalna wartość wyświetlana na wadze. Ignorowany w przypadku wykresów kołowych. Domyślna wartość to minimalna wartość danych z wyjątkiem wykresów słupkowych, gdzie wartością domyślną jest 0. Jest ona ignorowana w przypadku wykresów słupkowych, gdy tabela ma więcej niż 1 kolumnę danych. |
Etykieta programu | wartość logiczna | prawda | Określa, czy etykiety powinny być wyświetlane na osi kategorii (tzn. w wierszu). Dostępne tylko w przypadku wykresów liniowych i słupkowych. |
Etykiety programu ShowValue | wartość logiczna | prawda | Wartość prawda powoduje wyświetlanie etykiety na osi wartości. Dostępne tylko w przypadku wykresów liniowych i słupkowych. |
pojedynczakolumna | liczba | brak | Renderuje tylko określoną kolumnę danych. Ta liczba to indeks oparty na zerowej wartości w tabeli, gdzie zero to pierwsza kolumna danych. Kolor przypisany do jednej kolumny jest taki sam jak podczas renderowania wszystkich kolumn. Nie można używać z wykresami kołowymi i mapowymi. |
tytuł | tekst | Pusty ciąg | Tytuł wykresu. Jeśli nie określisz tytułu, tytuł nie będzie wyświetlany. Odpowiednik
parametru wykresu to chtt . |
ValueLabelsInterval | liczba | Automatycznie | Odstęp czasowy między etykietami osi wartości. Jeśli na przykład min to 0, max to 100, a valueLabelsInterval to 20, na wykresie pojawią się etykiety osi (0, 20, 40, 60, 80 100). |
szerokość | liczba | 400 | Szerokość wykresu w pikselach. Jeśli nie ma go lub nie ma w akceptowanym zakresie, używana jest szerokość zawartego elementu. Jeśli będzie się też przekracza akceptowany zakres, zostanie użyta szerokość domyślna. |
Metody
Metoda | Typ zwracanej wartości | Opis |
---|---|---|
draw(data, options) |
Brak | Rysuje mapę. |
getImageUrl() |
Ciąg znaków | Zwraca adres URL interfejsu Google Chart API używany do żądania wykresu. Pamiętaj,że może on zawierać więcej niż 2000 znaków. Więcej informacji znajdziesz na stronie o interfejsie Google Chart API. |
Zdarzenia
Jeśli ustawisz właściwość enableEvents
na wartość „true”, obsługa wykresów
zwróci zdarzenia użytkownika wymienione w tabeli poniżej. Wszystkie te zdarzenia zwracają obiekt event
z tymi właściwościami:
type
– ciąg znaków reprezentujący typ zdarzenia.region
– identyfikator regionu, którego dotyczy problem; Aby zobaczyć listę dostępnych nazw, dodaj typ nieprzetworzonego parametruchof=json
. Więcej informacji:chof=json
.
Nazwa | Opis | Typ wartości |
---|---|---|
error |
Uruchamiane, gdy podczas próby renderowania wykresu wystąpi błąd. | id, message, |
onmouseover |
Uruchamiane, gdy użytkownik najedzie kursorem na element wykresu. | „mouseover” |
onmouseout |
Uruchamiane, gdy użytkownik odsunie kursor od elementu wykresu. | „mouseout” |
onclick |
Uruchamiane, gdy użytkownik kliknie element wykresu. | „kliknij” |
Które wykresy obsługują zdarzenia?
Wszystkie wykresy, które obsługują parametr chof=json
, obsługują zdarzenia przesyłania (czyli wszystkie wykresy oprócz specjalnych, np. kodów QR).
Przykład obsługi zdarzenia
Oto przykład paska z kliknięciami myszy.
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title> Google Image Events Sample </title> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {packages: ['imagechart']}); </script> <script type="text/javascript"> function drawVisualization() { var dataTable = new google.visualization.DataTable(); dataTable.addColumn('number'); dataTable.addColumn('number'); dataTable.addRows([ [10,50], [50,60], [60,100], [80,40], [40,20] ]); var options = {cht: 'bvs', chs: '300x125', colors:['#4D89F9','#C6D9FD'], chds:'0,160', chxl:'0:|oranges|apples|pears|bananas|kiwis|', enableEvents:true}; var chart = new google.visualization.ImageChart(document.getElementById('visualization')); chart.draw(dataTable, options); // Assign event handler google.visualization.events.addListener(chart, 'onclick', mouseEventHandler); } google.charts.setOnLoadCallback(drawVisualization); // Define an event handler function mouseEventHandler(event) { document.getElementById('debugger').innerHTML += "You clicked " + event.region + "<br/>"; } </script> </head> <body style="font-family: Arial;border: 0 none;"> <div id="visualization" style="width: 300px; height: 300px;"></div> <div id="debugger"></div> </body> </html>
Zasady dotyczące danych
Dane są wysyłane do usługi Google Chart API.
Lokalizacja
Ta wizualizacja obsługuje wszystkie lokalizacje obsługiwane przez usługę Wykres Google.