Ważne: 20 kwietnia 2012 r. oficjalnie wycofano z narzędzi Google Chart API sekcja Wykresy graficzne. Nadal będzie działać zgodnie z naszymi zasadami dotyczącymi wycofywania.
Omówienie
Ogólny wykres graficzny to ogólny kod dla wszystkich wykresów tworzonych przez Google Chart API. Zanim użyjesz tej wizualizacji, przeczytaj dokumentację interfejsu Chart API. Pamiętaj, że za pomocą tej wizualizacji możesz wysłać nawet 16 tys. danych, w przeciwieństwie do limitu 2 tys. w bezpośrednich wywołaniach 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 pozostałe 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 zapakowanych wykresach słupkowych nie musisz określać parametru chxt=„x”, tak jak w przypadku samodzielnego wywoływania wykresu. Jeśli nie określisz osi, ogólny wykres graficzny spróbuje skonfigurować go prawidłowo.
<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 „imagechart”
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 mapy i jeden dla wszystkich pozostałych wykresów. Jedynym formatem liczbowym obsługiwanym w przypadku danych jest typ numeru JavaScript.
Uwaga: nie koduj w adresie URL wartości ciągów znaków przekazywanych jako dane lub opcje.
Wykresy map
Na wykresie mapowym tabela danych zawiera 2 wymagane kolumny:
- Pierwsza kolumna – [ciąg znaków] Kod kraju lub regionu.
- Druga kolumna – [liczba] wartość dla danego kraju lub województwa.
Więcej informacji znajdziesz w dokumentacji wykresu map.
Wykresy inne niż mapy
Wykresy inne niż mapy przyjmują tabelę danych z 2 opcjonalnymi kolumnami (jedną na początku i jedną na końcu) oraz z co najmniej 1 kolumną między nimi:
- Pierwsza kolumna – [opcjonalnie, ciąg znaków] Każdy wpis reprezentuje etykietę używaną na osi X (odpowiednik parametru
chllubchxl) na potrzeby wykresów, które go obsługują. - Następne kolumny – dowolna liczba kolumn liczbowych, z których każda reprezentuje serię danych.
- Ostatnie kolumny – [opcjonalnie, ciąg znaków] dowolna liczba kolumn z ciągami znaków po kolumnach danych, gdzie każdy wpis reprezentuje etykietę punktu danych w przypadku wykresów, które ją obsługują. Jeśli chcesz użyć tej kolumny, musisz wybrać opcję
annotationColumns.
Dane są wyświetlane na różne sposoby w zależności od typu wykresu. Zapoznaj się z dokumentacją wykresu.
Uwaga na temat indeksów kolumn: wizualizacja ogólnego wykresu graficznego usuwa kolumny z ciągami znaków z tabeli danych przed wysłaniem jej do usługi Chart API. Dlatego indeksy kolumn w opcjach, metodach i zdarzeniach zdefiniowanych na tej stronie obejmują kolumny z ciągami znaków w liczbie indeksów. Indeksy kolumn we wszystkich opcjach obsługiwanych przez usługę interfejsu Chart API (np. opcja chm) ignorują kolumny z ciągami znaków w liczbie indeksów.
Opcje konfiguracji
Na potrzeby tej wizualizacji określono podane niżej opcje. Określ je w obiekcie options przekazywanym do metody draw() wizualizacji.
Nie wszystkie z tych opcji są obsługiwane w przypadku wszystkich typów wykresów. Zapoznaj się z dokumentacją typu wykresu z obrazem statycznym. Możesz przekazać dowolny parametr adresu URL interfejsu Chart API. Na przykład parametr adresu URL chg=50,50 z wizualizacji na wykresie zostałby 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 kolorów interfejsu Chart API.
Ten format jest podobny do formatu #RRGGBB z tą różnicą, że zawiera opcjonalną czwartą liczbę szesnastkową wskazującą przezroczystość. Kolory zrozumiałe dla człowieka, takie jak „czerwony”, „zielony”, „niebieski” itd., nie są obsługiwane. Format kolorów interfejsu Chart API nie zawiera początkowego symbolu #, ale ogólne opcje wizualizacji wykresu graficznego akceptują kody kolorów ze znakiem # lub bez niego.
| Nazwa | Typ | Domyślne | Opis |
|---|---|---|---|
| annotationColumns | Array<object> | brak | Etykiety punktów danych dla różnych typów wykresów. Jest to tablica obiektów, z których każdy przypisuje sformatowaną etykietę do jednego punktu danych na wykresie. Ta opcja jest dostępna tylko w przypadku wykresów, które obsługują punkty danych (aby dowiedzieć się, które z nich, sprawdź w powiązanym temacie), a tabela danych musi zawierać co najmniej 1 kolumnę etykiet z ciągami znaków. Każdy obiekt w tablicy ma te właściwości:
Przykład: ten fragment kodu definiuje czarną, 12-pikselową etykietę tekstową z tekstem pobranym z kolumny 0 i przypisanym do punktu danych w kolumnie 2 tego samego wiersza: |
| backgroundColor | string, | '#FFFFFF' (biała) | Kolor tła wykresu w formacie kolorów interfejsu Chart API. |
| kolor | string, | Automatycznie | Określa kolor podstawowy, który ma być używany dla wszystkich serii. Każda seria będzie gradacją wybranego koloru. Kolory określa się w formacie kolorów interfejsu Chart API.
Ignorowana, jeśli określono colors. |
| kolory | Tablica<ciąg> | Automatycznie | Służy do przypisywania określonych kolorów każdej serii danych. Kolory określa się w formacie kolorów interfejsu Chart API.
Kolor i jest używany w kolumnie danych I. Jeśli kolumn danych jest więcej niż kolorów, zakres jest zawijany do początku. Jeśli odmiany jednego koloru są dozwolone w przypadku wszystkich serii, użyj opcji color. |
| enableEvents | boolean | false | Powoduje, że wykresy wywołują zdarzenia wywoływane przez użytkownika, takie jak kliknięcie lub najechanie kursorem myszy. Obsługiwane tylko w przypadku określonych typów wykresów. Zobacz Zdarzenia poniżej. |
| fill | boolean | false | Jeśli ma wartość true (prawda), wypełnia obszar pod każdym wierszem. Dostępne tylko w przypadku wykresów liniowych. |
| firstHiddenColumn | Liczba | brak | Indeks kolumny danych. Ta kolumna, jak również wszystkie kolejne kolumny, nie będzie używana do rysowania głównych elementów serii wykresów (takich jak linie na wykresie liniowym czy słupki na wykresie słupkowym), ale będzie używana jako dane dla znaczników i innych adnotacji. Pamiętaj, że kolumny z ciągami znaków są uwzględnione w tej liczbie indeksu. |
| wysokość | Liczba | 200 | Wysokość wykresu w pikselach. Jeśli jej nie ma lub nie mieści się w dopuszczalnym zakresie, używana jest wysokość elementu zawierającego jej element. Jeśli wykracza ona też poza dopuszczalny zakres, zostanie użyta wysokość domyślna. |
| etykiety | string, | „none” (brak) | [Tylko wykres kołowy] Jaka etykieta ma być wyświetlana w przypadku każdego wycinka. Wybierz jedną z tych wartości:
|
| legenda | string, | „prawo” | Gdzie jest wyświetlana legenda wykresu (w odniesieniu do wykresu). Podaj jedną z tych wartości: „top”, „bottom”, „left”, „right”, „none”. Ignorowany na wykresach, które nie zawierają legendy (np. na wykresach mapy). |
| maksimum | Liczba | Maksymalna wartość danych | Maksymalna wartość wyświetlana na skali. Ignorowana w przypadku wykresów kołowych. Wartość domyślna to maksymalna wartość danych, z wyjątkiem wykresów słupkowych, gdzie wartością domyślną jest maksymalna wartość danych. Jest ona ignorowana w przypadku wykresów słupkowych, gdy tabela ma więcej niż 1 kolumnę danych. |
| min | Liczba | Minimalna wartość danych | Minimalna wartość wyświetlana na skali. Ignorowana w przypadku wykresów kołowych. Wartość domyślna to minimalna wartość danych. Wyjątkiem są wykresy słupkowe, gdzie wartość domyślna to 0. Jest ona ignorowana w przypadku wykresów słupkowych, gdy tabela ma więcej niż 1 kolumnę danych. |
| showCategoryLabels | boolean | prawda | Określa, czy etykiety mają być wyświetlane na osi kategorii (np. wiersza). Dostępne tylko w przypadku wykresów liniowych i słupkowych. |
| showValueLabels | boolean | prawda | Wartość Prawda wyświetla etykietę na osi wartości. Dostępne tylko w przypadku wykresów liniowych i słupkowych. |
| singleColumnDisplay | Liczba | brak | Renderuje tylko określoną kolumnę danych. Jej indeks w tabeli jest liczony od zera, gdzie 0 oznacza pierwszą kolumnę danych. Kolor przypisany do pojedynczej kolumny jest taki sam jak podczas renderowania wszystkich kolumn. Nie można używać z wykresami kołowymi i mapowymi. |
| tytuł | string, | Pusty ciąg | Tytuł wykresu. Jeśli nie podasz tytułu, nie będzie wyświetlany. Odpowiedni parametr wykresu to chtt. |
| valueLabelsInterval | Liczba | Automatycznie | Interwał, po którym mają być wyświetlane etykiety osi wartości. Jeśli np. min to 0, max to 100, a valueLabelsInterval to 20, na wykresie będą widoczne etykiety osi (0, 20, 40, 60, 80 100). |
| szerokość | Liczba | 400 | Szerokość wykresu w pikselach. Jeśli jej nie ma lub nie mieści się w dopuszczalnym zakresie, używana jest szerokość elementu zawierającego. Jeśli wykracza ona też poza dopuszczalny 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 mieć ponad 2000 znaków. Więcej informacji znajdziesz w interfejsie Google Chart API. |
Zdarzenia
Jeśli ustawisz właściwość enableEvents na wartość „true”, wykresy obsługujące będą generować zdarzenia dla zdarzeń użytkownika wymienionych w tabeli poniżej. Wszystkie te zdarzenia zwracają obiekt event z tymi właściwościami:
type– ciąg tekstowy wskazujący typ zdarzenia.region– identyfikator regionu, którego dotyczy problem. Aby wyświetlić listę dostępnych nazw, dodaj parametrchof=jsondo typu wykresu nieprzetworzonego. Więcej informacji znajdziesz w sekcjichof=json.
| Nazwa | Opis | Typ Wartość |
|---|---|---|
error |
Uruchamiane, gdy podczas próby wyrenderowania wykresu wystąpi błąd. | identyfikator, wiadomość |
onmouseover |
Uruchamiane, gdy użytkownik najedzie kursorem na element wykresu. | „mouseover” |
onmouseout |
Uruchamiane, gdy użytkownik najedzie kursorem poza element 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 (czyli wszystkie wykresy z wyjątkiem wykresów specjalnych, np. z kodami QR).
Przykład obsługi zdarzeń
Oto przykład paska rejestrującego kliknięcia myszą.
<!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 każdą lokalizację obsługiwaną przez usługę wykresów Google.