Jak korzystać z interfejsu GoogleWizualizacj API

Na tej stronie wymieniono obiekty, które są widoczne przez interfejs Googletzn. API, oraz standardowe metody wyświetlania wszystkich wizualizacji.

Uwaga: przestrzeń nazw interfejsu Google wizualizacji API to google.visualization.*

1. Klasa tabeli danych
2. Klasa DataView
3. Klasa GrafWrapper
4. Klasa edytora wykresów
5. Metody manipulowania danymi
   1. group()
   2. join()
6. Formaty
   1. Strzałka
   2. BarFormat
   3. ColorFormat
   4. DateFormat,
   5. Format liczb
   6. PatternFormat
7. Zajęcia z gadżetu
8. Klasy zapytania
   1. Zapytanie
   2. Zapytanie
9. Klasa wyświetlania błędów
10. Zdarzenia
    1. google.visualization.events.addListener(),
    2. google.visualization.events.addOneTimeListener(),
    3. google.visualization.events.removeListener(),
    4. google.visualization.events.removeAllListeners(),
    5. google.visualization.events.trigger()
11. Standardowe metody i właściwości wizualizacji
    1. Konstruktor
    2. draw()
    3. getAction().
    4. getSelection()
    5. removeAction().
    6. setAction().
    7. setSelection().
12. Różne metody statyczne
    1. tablica_danych_tabeli()
    2. drawChart()
    3. drawToolbar().

Uwaga dotycząca tablic

Niektóre przeglądarki nie obsługują poprawnie przecinków końcowych w tablicach JavaScript, więc nie należy ich używać. Puste wartości pośrodku tablicy. Na przykład:

data = ['a','b','c', ,]; // BAD
data = ['a','b','c'];   // OK
data = ['a','b', ,'d']; // Also OK. The third value is undefined.

Klasa tabeli danych

Reprezentuje dwuwymiarową, zmienną tabelę wartości. Aby utworzyć kopię tylko DataTable do odczytu (opcjonalnie można ją wyświetlić, aby pokazać określone wartości, wiersze lub kolumny), utwórz DataView.

Każdej kolumnie jest przypisany typ danych oraz kilka opcjonalnych właściwości, takich jak identyfikator, etykieta i ciąg wzorca.

Dodatkowo do każdej komórki, wiersza, kolumny lub całej tabeli możesz przypisać właściwości niestandardowe (pary nazw i wartości). Niektóre wizualizacje obsługują określone właściwości niestandardowe, np. Wizualizacja tabeli obsługuje właściwość komórki o nazwie „style”, która pozwala przypisać wbudowany ciąg znaków CSS do wyrenderowanej komórki tabeli. Wizualizacja powinna opisywać w dokumentacji obsługiwane właściwości niestandardowe.

Zobacz też: QueryResponse.getDataTable

Konstruktor

Składnia

DataTable(opt_data, opt_version)

opt_data

[Opcjonalny] Dane używane do inicjowania tabeli. Może to być plik JSON zwrócony przez wywołanie DataTable.toJSON() w zapełnionej tabeli lub obiekt JavaScript zawierający dane używane do inicjowania tabeli. Struktura obiektu literału JavaScript jest dostępna tutaj. Jeśli ten parametr nie zostanie podany, zostanie zwrócona nowa, pusta tabela danych.

wersja_opt.

[Opcjonalny] Wartość liczbowa określająca wersję protokołu przewodowego. Używa go tylko implementator źródeł danych narzędzi narzędzi do wykresów. Obecna wersja to 0.6.

Szczegóły

Obiekt DataTable służy do przechowywania danych przekazywanych do wizualizacji. DataTable to podstawowa tabela dwuwymiarowa. Wszystkie dane w każdej kolumnie muszą mieć ten sam typ danych. Każda kolumna ma deskryptor z typem danych, etykietą (którą może wyświetlać wizualizacja) i identyfikatorem, którego można użyć, aby odwoływać się do określonej kolumny (zamiast alternatywy do indeksowania indeksów). Obiekt DataTable obsługuje też mapę dowolnych właściwości przypisanych do konkretnej wartości, wiersza, kolumny lub całego obiektu DataTable. Mogą one służyć do obsługi dodatkowych funkcji, na przykład w wizualizacji tabeli zawierającej właściwości niestandardowe umożliwiające przypisywanie dowolnych nazw klas lub stylów do poszczególnych komórek.

Każda komórka w tabeli zawiera wartość. Komórki mogą mieć wartość null lub typ określonego w kolumnie. Komórki mogą pobierać dane w formacie „sformatowanym”. Jest to wersja ciągu danych sformatowana na potrzeby wizualizacji. Wizualizacja może (ale nie musi) korzystać ze sformatowanej wersji na potrzeby wyświetlania, ale zawsze używa danych do sortowania i obliczania (jak np. w dowolnym miejscu na wykresie). Przykładem może być przypisanie wartości liczbowych „low” (niska) i „high” (sformatowana) do liczbowych wartości w komórkach 1, 2 i 3.

Aby dodać wiersze danych po wywołaniu konstruktora, możesz wywołać addRow() w jednym wierszu lub addRows() w wielu wierszach. Możesz też dodawać kolumny, wywołując metody addColumn(). Istnieją również metody usuwania wierszy i kolumn, ale zamiast usuwać wiersze lub kolumny, lepiej utworzyć DataView w selektywny widok DataTable.

Jeśli zmienisz wartości w polu DataTable po przekazaniu ich do metody wizualizacji draw(), nie spowoduje to natychmiastowej zmiany wykresu. Aby odzwierciedlić zmiany, musisz ponownie wywołać metodę draw().

Uwaga: Wykresy Google nie przeprowadzają żadnych walidacji tabel danych. W przeciwnym razie renderowanie będzie wolniejsze. Jeśli podasz liczbę, w której kolumna oczekuje ciągu, lub odwrotnie, Wykresy Google zrobią, co w jego mocy, aby zinterpretować wartość w sensowny sposób, ale nie oznaczą błędów.

Przykłady

Poniższy przykład pokazuje, jak utworzyć instancję DataTable i jej wypełniać literał (z tymi samymi danymi co w przykładzie powyżej):

var dt = new google.visualization.DataTable({
    cols: [{id: 'task', label: 'Task', type: 'string'},
           {id: 'hours', label: 'Hours per Day', type: 'number'}],
    rows: [{c:[{v: 'Work'}, {v: 11}]},
           {c:[{v: 'Eat'}, {v: 2}]},
           {c:[{v: 'Commute'}, {v: 2}]},
           {c:[{v: 'Watch TV'}, {v:2}]},
           {c:[{v: 'Sleep'}, {v:7, f:'7.000'}]}]
    }, 0.6);

Ten przykład tworzy nowy, pusty obiekt DataTable, a następnie wypełnia go ręcznie danymi podanymi powyżej:

var data = new google.visualization.DataTable();
data.addColumn('string', 'Task');
data.addColumn('number', 'Hours per Day');
data.addRows([
  ['Work', 11],
  ['Eat', 2],
  ['Commute', 2],
  ['Watch TV', 2],
  ['Sleep', {v:7, f:'7.000'}]
]);

Czy mam utworzyć tabelę danych w JavaScript czy w notacji literału obiektu?

DataTable możesz utworzyć, wywołując konstruktor bez parametrów, a następnie dodając wartości, wywołując metody addColumn()/addRows() wymienione poniżej, lub przekazując zapełniony obiekt literału JavaScript, aby go zainicjować. Poniżej opisano obie metody. Której usługi należy użyć?

• Tworzenie i wypełnianie tabeli w JavaScript za pomocą elementów addColumn(), addRow() i addRows() jest bardzo czytelne. Ta metoda jest przydatna, gdy wpisujesz kod ręcznie. Jest wolniejszy niż w przypadku zapisu literału obiektu (opisanego dalej), ale w mniejszych tabelach (np. 1000 komórek) zwykle nie zauważysz dużej różnicy.
• W przypadku dużych tabel deklaracja bezpośredniego obiektu DataTable przy użyciu notacji literału obiektu jest znacznie szybsza. Jednak użycie prawidłowej składni może być trudne. Użyj jej, jeśli możesz wygenerować składnię dosłowną obiektu w kodzie, co zmniejsza ryzyko wystąpienia błędów.

 

Metody

Metoda	Wartość zwrotu	Opis
addColumn(type, opt_label, opt_id) LUB addColumn(description_object)	Liczba	Dodaje nową kolumnę do tabeli danych i zwraca indeks nowej kolumny. Wszystkie komórki nowej kolumny mają przypisaną wartość null. Ta metoda ma 2 podpisy: Pierwszy podpis ma następujące parametry: type – ciąg znaków zawierający typ danych wartości kolumny. Możesz użyć jednego z tych typów: 'string', 'number', 'boolean', 'date', 'datetime', i 'timeofday'. opt_label – [opcjonalny] – ciąg znaków z etykietą kolumny. Etykieta kolumny jest zwykle wyświetlana jako część wizualizacji, np. jako nagłówek kolumny w tabeli lub jako etykieta legendy na wykresie kołowym. Jeśli nie podasz żadnej wartości, zostanie przypisany pusty ciąg znaków. opt_id – [opcjonalny] ciąg z unikalnym identyfikatorem kolumny, Jeśli nie podasz żadnej wartości, zostanie przypisany pusty ciąg znaków. Drugi podpis zawiera parametr pojedynczego obiektu z tymi elementami: type – ciąg opisujący typ danych w kolumnie; Te same wartości co w polu type powyżej. label – [opcjonalny ciąg znaków] etykieta kolumny. id – [opcjonalny ciąg znaków] identyfikator kolumny. role – [opcjonalny ciąg znaków] rola kolumny. pattern – [opcjonalny ciąg znaków] ciąg tekstowy (lub data) określający, jak wyświetlić wartość kolumny; Zobacz też: getcolumnId, getcolumnLabel, getcolumnType, insertcolumn, getcolumnRole
addRow(opt_cellArray)	Liczba	Dodaje nowy wiersz do tabeli danych i zwraca indeks nowego wiersza. opt_cellArray [opcjonalny] – obiekt wiersza w notacji JavaScript, który zawiera dane dla nowego wiersza. Jeśli nie podasz tego parametru, na końcu tabeli zostanie dodany nowy, pusty wiersz. Ten parametr jest tablicą wartości komórki: jeśli chcesz określić tylko wartość komórki, określ jej wartość (np. 55 lub „cześć”), jeśli chcesz określić sformatowaną wartość lub właściwości komórki, użyj obiektu komórki (np. {v:55, f:'Pięćdziesiąt pięć}. Podczas tej samej metody możesz mieszać proste wartości i obiekty komórek). W przypadku pustej komórki wpisz null lub pusty wpis w tablicy. Przykłady: data.addRow(); // Add an empty row data.addRow(['Hermione', new Date(1999,0,1)]); // Add a row with a string and a date value. // Add a row with two cells, the second with a formatted value. data.addRow(['Hermione', {v: new Date(1999,0,1), f: 'January First, Nineteen ninety-nine'} ]); data.addRow(['Col1Val', null, 'Col3Val']); // Second column is undefined. data.addRow(['Col1Val', , 'Col3Val']); // Same as previous.
addRows(numOrArray)	Liczba	Dodaje nowe wiersze do tabeli danych i zwraca indeks ostatniego dodanego wiersza. Możesz użyć tej metody, aby utworzyć nowe puste wiersze lub dane używane do zapełniania wierszy, jak opisano poniżej. numOrArray – liczba lub tablica: Liczba – liczba określająca liczbę nowych, niezapełnionych wierszy. Tablica – tablica wierszy obiektów używanych do wypełniania zestawu nowych wierszy. Każdy wiersz to obiekt zgodnie z opisem w addRow(). W przypadku pustej komórki użyj elementu null lub pustego wpisu w tablicy. Przykład: data.addRows([ ['Ivan', new Date(1977,2,28)], ['Igor', new Date(1962,7,5)], ['Felix', new Date(1983,11,17)], ['Bob', null] // No date set for Bob. ]); Zobacz też: insertRows
clone()	Tabela danych	Zwraca klon tabeli danych. W wyniku tego powstaje głęboka kopia tabeli danych z wyjątkiem właściwości komórek, właściwości wiersza, właściwości tabeli oraz właściwości kolumny, które są płytkimi treściami; oznacza to, że właściwości nie podstawowe są kopiowane przez odwołanie, ale właściwości podstawowe są kopiowane według wartości.
getColumnId(columnIndex)	Ciąg znaków	Zwraca identyfikator danej kolumny określony przez indeks kolumny w tabeli bazowej. W przypadku tabel danych pobieranych przez zapytania identyfikator kolumny jest ustawiany przez źródło danych i można go używać, aby odwoływać się do kolumn za pomocą języka zapytania. Zobacz też: Query.setQuery
getColumnIndex(columnIdentifier)	Ciąg tekstowy, liczba	Zwraca indeks określonej kolumny określony przez indeks, identyfikator lub etykietę kolumny, jeśli ta kolumna istnieje w tej tabeli. W przeciwnym razie zwraca -1. Gdy ciąg znaków columnIdentifier jest ciągiem tekstowym, najpierw używane jest wyszukiwanie kolumny według jej identyfikatora, a następnie etykiety. Zobacz też: getcolumnId, getcolumnLabel
getColumnLabel(columnIndex)	Ciąg znaków	Zwraca etykietę danej kolumny określoną przez indeks kolumny w tabeli bazowej. Etykieta kolumny jest zwykle wyświetlana jako część wizualizacji. Na przykład etykieta kolumny może się wyświetlić jako nagłówek kolumny w tabeli lub jako legenda na wykresie kołowym. W przypadku tabel danych pobieranych przez zapytania etykieta kolumny jest ustawiana przez źródło danych lub za pomocą klauzuli label w języku zapytania. Zobacz też: setColumnLabel
getColumnPattern(columnIndex)	Ciąg znaków	Zwraca wzorzec formatowania używany do formatowania wartości z określonej kolumny. columnIndex powinna być liczbą większą lub równą 0 i mniejszą niż liczba kolumn zwracana przez metodę getNumberOfColumns(). W przypadku tabel danych pobieranych przez zapytania wzorzec kolumny jest ustawiany przez źródło danych lub za pomocą klauzuli format w języku zapytania. Przykładem wzorca jest '#,##0.00'. Więcej informacji o wzorcach znajdziesz w dokumentacji języka zapytań.
getColumnProperties(columnIndex)	obiekt	Zwraca mapę wszystkich właściwości określonej kolumny. Zauważ, że obiekt usług jest zwracany przez odwołanie, więc zmiana wartości w pobranym obiekcie spowoduje ich zmianę w DataTable. columnIndex to indeks numeryczny kolumny, z której pobierane są właściwości.
getColumnProperty(columnIndex, name)	Automatycznie	Zwraca wartość nazwanej właściwości (null), jeśli nie ustawiono żadnej właściwości w określonej kolumnie. Typ zwrotu zależy od usługi. columnIndex powinna być liczbą większą lub równą 0 i mniejszą niż liczba kolumn zwracana przez metodę getNumberOfColumns(). name to nazwa właściwości w postaci ciągu znaków. Zobacz też: setcolumnProperty setColumnProperties
getColumnRange(columnIndex)	obiekt	Zwraca wartości minimalne i maksymalne wartości w określonej kolumnie. Zwracany obiekt ma właściwości min i max. Jeśli zakres nie zawiera wartości, min i max będą zawierać null. columnIndex powinna być liczbą większą lub równą 0 i mniejszą niż liczba kolumn zwracana przez metodę getNumberOfColumns().
getColumnRole(columnIndex)	Ciąg znaków	Zwraca rolę określonej kolumny.
getColumnType(columnIndex)	Ciąg znaków	Zwraca typ danej kolumny określony przez indeks kolumny. columnIndex powinna być liczbą większą lub równą 0 i mniejszą niż liczba kolumn zwracana przez metodę getNumberOfColumns(). Zwracanym typem kolumny może być jeden z tych typów: 'string', 'number', 'boolean', 'date', 'datetime', lub 'timeofday'.
getDistinctValues(columnIndex)	Tablica obiektów	Zwraca unikalne wartości w określonej kolumnie w kolejności rosnącej. columnIndex powinna być liczbą większą lub równą 0 i mniejszą niż liczba kolumn zwracana przez metodę getNumberOfColumns(). Typ zwróconych obiektów jest taki sam jak typ zwrócony przez metodę getValue.
getFilteredRows(filters)	Tablica obiektów	Zwraca indeksy wierszy, które pasują do wszystkich określonych filtrów. Indeksy są zwracane w kolejności rosnącej. Wyniki tej metody można wykorzystać jako dane wejściowe DataView.setRows(), aby zmienić wyświetlany zestaw wierszy w wizualizacji. filters – tablica obiektów opisujących akceptowalną wartość komórki. Indeks wiersza jest zwracany przez tę metodę, jeśli pasuje on do wszystkich podanych filtrów. Każdy filtr to obiekt z liczbową właściwością column, która określa indeks kolumny w wierszu, który ma zostać uwzględniony, oraz jeden z tych elementów: Właściwość value z wartością, która musi być dokładnie dopasowana do komórki w określonej kolumnie. Wartość musi być tego samego typu co kolumna. Jedna lub obie z podanych niżej właściwości, tego samego typu co filtrowana kolumna: minValue – minimalna wartość w komórce. Wartość w komórce w określonej kolumnie musi być równa tej wartości lub od niej większa. maxValue – maksymalna wartość w komórce. Wartość w komórce w określonej kolumnie musi być mniejsza od tej wartości lub jej równa. Pusta wartość lub wartość nieokreślona dla minValue (lub maxValue) oznacza, że dolna (ani górna) granica zakresu nie będzie egzekwowana. Inna opcjonalna właściwość test określa funkcję, która zostanie połączona z filtrowaniem wartości lub zakresu. Funkcja jest wywoływana z wartością komórki, indeksami wierszy i kolumn oraz tabelą danych. Jeśli wiersz powinien zostać wykluczony z wyniku, pole powinno zwrócić wartość „false”. Przykład: getFilteredRows([{column: 3, value: 42}, {column: 2, minValue: 'bar', maxValue: 'foo'}, {column: 1, test: (value, rowId, columnId, datatable) => { return value == "baz"; }}]) zwraca tablicę zawierającą w kolejności rosnącej indeksy ze wszystkich wierszy, w których 4 kolumna (indeks kolumny 3) zawiera dokładnie 42, a trzecia kolumna (indeks kolumny 2) mieści się w przedziale „bar” i „foo” (włącznie).
getFormattedValue(rowIndex, columnIndex)	Ciąg znaków	Zwraca sformatowaną wartość komórki w indeksach wierszy i kolumn. Wartość rowIndex powinna być liczbą większą lub równą 0 i mniejszą niż liczba wierszy zwrócona przez metodę getNumberOfRows(). ColumnIndex powinna być liczbą większą lub równą 0 i mniejszą niż liczba kolumn zwracana przez metodę getNumberOfColumns(). Więcej informacji o formatowaniu wartości kolumn znajdziesz w dokumentacji języka zapytań. Zobacz też: setFormattedValue
getNumberOfColumns()	Liczba	Zwraca liczbę kolumn w tabeli.
getNumberOfRows()	Liczba	Zwraca liczbę wierszy w tabeli.
getProperties(rowIndex, columnIndex)	obiekt	Zwraca mapę wszystkich właściwości określonej komórki. Obiekt właściwości jest zwracany przez odwołanie, więc zmiana wartości w pobranym obiekcie powoduje ich zmianę w DataTable. rowIndex to indeks wiersza komórki. columnIndex to indeks kolumny komórki.
getProperty(rowIndex, columnIndex, name)	Automatycznie	Zwraca wartość nazwanej właściwości null lub jeśli ta właściwość nie jest ustawiona dla określonej komórki. Typ zwrotu zależy od usługi. Wartość rowIndex powinna być liczbą większą lub równą 0 i mniejszą niż liczba wierszy zwrócona przez metodę getNumberOfRows(). columnIndex powinna być liczbą większą lub równą 0 i mniejszą niż liczba kolumn zwracana przez metodę getNumberOfColumns(). name to ciąg znaków o nazwie właściwości. Zobacz też: setCell setProperties setProperty
getRowProperties(rowIndex)	obiekt	Zwraca mapę wszystkich właściwości określonego wiersza. Zauważ, że obiekt usług jest zwracany przez odwołanie, więc zmiana wartości w pobranym obiekcie spowoduje ich zmianę w DataTable. rowIndex to indeks wiersza, z którego pochodzą właściwości.
getRowProperty(rowIndex, name)	Automatycznie	Zwraca wartość nazwanej właściwości (null), jeśli nie ustawiono żadnej właściwości w określonym wierszu. Typ zwrotu zależy od usługi. Wartość rowIndex powinna być liczbą większą lub równą 0 i mniejszą niż liczba wierszy zwrócona przez metodę getNumberOfRows(). name to ciąg znaków o nazwie właściwości. Zobacz też: setRowProperty setRowProperties
getSortedRows(sortColumns)	Tablica liczb	Zwraca posortowaną wersję tabeli bez zmiany kolejności danych bazowych. Aby trwale sortować dane, wywołaj sort(). W zależności od typu przekazywanego parametru sortColumns możesz sortować je na wiele sposobów: Pojedyncza liczba określa indeks kolumny do sortowania. Sortuję w kolejności rosnącej. Przykład: sortColumns(3) sortuje według 4. kolumny, w kolejności rosnącej. Jeden obiekt zawierający numer indeksu kolumny do sortowania i opcjonalną właściwość logiczną desc. Jeśli desc ma wartość Prawda, konkretna kolumna jest posortowana w kolejności malejącej. W przeciwnym razie sortowanie jest w kolejności rosnącej. Przykłady: sortColumns({column: 3}) zostaną posortowane według 4. kolumny, w kolejności rosnącej, sortColumns({column: 3, desc: true}) – według 4. kolumny, w kolejności malejącej. Tablica cyfr kolumny, według której odbywa się sortowanie, Pierwsza liczba to kolumna podstawowa, według której odbywa się sortowanie, druga to wartość dodatkowa, itd. Oznacza to, że gdy 2 wartości w pierwszej kolumnie są równe, wartości w następnej kolumnie są porównywane itd. Przykład: sortColumns([3, 1, 6]) sortuje najpierw dane według 4. kolumny (w kolejności rosnącej), a następnie według 2. kolumny (w kolejności rosnącej) i 7. kolumny (w kolejności rosnącej). Tablica obiektów, każdy z numerem indeksu kolumny do sortowania, i opcjonalna właściwość wartości logicznej desc. Jeśli desc ma wartość Prawda, konkretna kolumna jest sortowana w kolejności malejącej (wartość domyślna to rosnąca). Pierwszy obiekt to kolumna podstawowa, według której odbywa się sortowanie, drugi to kolumna druga, itd. Oznacza to, że gdy 2 wartości w pierwszej kolumnie są równe, wartości w następnej kolumnie są porównywane itd. Przykład:sortColumn([{column: 3}, {column: 1, desc: true}, {column: 6, desc: true}]) sortuje najpierw kolumnę 4 (w kolejności rosnącej), potem 2 – w porządku malejącym. Zwracana wartość to tablica liczb, a każda liczba to indeks wiersza DataTable. Redagowanie wierszy DataTable według kolejności zwróconej tablicy spowoduje utworzenie wierszy uporządkowanych według określonego argumentu sortColumns. Dane wyjściowe można wykorzystać jako dane wejściowe DataView.setRows(), aby szybko zmienić wyświetlany zestaw wierszy w wizualizacji. Pamiętaj, że sortowanie jest stabilne: oznacza to, że jeśli posortujesz wiersze w równych wartościach dwóch, za każdym razem będzie to samo. Zobacz też: sortowanie Przykład: aby powielać wiersze uporządkowane według trzeciej kolumny, użyj funkcji: var rowInds = data.getSortedRows([{column: 2}]); for (var i = 0; i < rowInds.length; i++) { var v = data.getValue(rowInds[i], 2); }
getTableProperties	obiekt	Zwraca mapę wszystkich właściwości tabeli.
getTableProperty(name)	Automatycznie	Zwraca wartość nazwanej właściwości null lub jeśli ta właściwość nie została ustawiona dla tabeli. Typ zwrotu zależy od usługi. name to ciąg znaków o nazwie właściwości. Zobacz też: setTableProperties setTableProperty
getValue(rowIndex, columnIndex)	obiekt	Zwraca wartość komórki w indeksach wierszy i kolumn. Wartość rowIndex powinna być liczbą większą lub równą 0 i mniejszą niż liczba wierszy zwrócona przez metodę getNumberOfRows(). columnIndex powinna być liczbą większą lub równą 0 i mniejszą niż liczba kolumn zwracana przez metodę getNumberOfColumns(). Typ zwróconej wartości zależy od typu kolumny (patrz getColumnType): Jeśli typem kolumny jest „string”, wartość jest ciągiem. Jeśli typ kolumny to „liczba”, wartość jest liczbą. Jeśli typ kolumny to „wartość logiczna”, wartość jest wartością logiczną. Jeśli kolumna ma typ „data” lub „data”, wartość jest obiektem daty. Jeśli typ kolumny to „timeofday”, wartość to tablica z 4 cyframi: [hour, minut, second, second]. Jeśli komórka zawiera wartość null, zwraca null.
insertColumn(columnIndex, type [,label [,id]])	Brak	Wstawia nową kolumnę do tabeli danych o określonym indeksie. Wszystkie istniejące kolumny, które znajdują się w podanym indeksie lub po nim, zostaną przeniesione do wyższego indeksu. columnIndex to liczba z wymaganym indeksem nowej kolumny. type to ciąg znaków z typem danych wartości kolumny. Możesz użyć jednego z tych typów: 'string', 'number', 'boolean', 'date', 'datetime', i 'timeofday'. label to ciąg znaków z etykietą kolumny. Etykieta kolumny pojawia się zwykle jako część wizualizacji, np. jako nagłówek kolumny w tabeli lub jako legenda na wykresie kołowym. Jeśli nie podasz żadnej wartości, zostanie przypisany pusty ciąg znaków. id to ciąg znaków o unikalnym identyfikatorze kolumny. Jeśli nie podasz żadnej wartości, zostanie przypisany pusty ciąg znaków. Zobacz też: addcolumn
insertRows(rowIndex, numberOrArray)	Brak	Wstaw określoną liczbę wierszy w określonym indeksie wiersza. rowIndex to numer indeksu, w którym należy wstawić nowe wiersze. Wiersze zostaną dodane, zaczynając od podanego numeru indeksu. numberOrArray to liczba nowych, pustych wierszy do dodania lub tablica co najmniej jednego wypełnionego wiersza w indeksie. Składnię dodawania obiektów wierszy znajdziesz w sekcji addRows(). Zobacz też:addRows
removeColumn(columnIndex)	Brak	Usuwa kolumnę z określonego indeksu. columnIndex powinna być liczbą z prawidłowym indeksem kolumny. Zobacz też: removeKolumny
removeColumns(columnIndex, numberOfColumns)	Brak	Usuwa określoną liczbę kolumn z kolumny o podanym indeksie. numberOfColumns to liczba kolumn do usunięcia. columnIndex powinna być liczbą z prawidłowym indeksem kolumny. Zobacz też: removeColumn
removeRow(rowIndex)	Brak	Usuwa wiersz z określonego indeksu. rowIndex musi być liczbą z prawidłowym indeksem wiersza. Zobacz też: removeRows
removeRows(rowIndex, numberOfRows)	Brak	Usuwa określoną liczbę wierszy z wiersza o określonym indeksie. numberOfRows to liczba wierszy do usunięcia. rowIndex musi być liczbą z prawidłowym indeksem wiersza. Zobacz też: removeRow
setCell(rowIndex, columnIndex [, value [, formattedValue [, properties]]])	Brak	Ustawia wartość, formatowaną wartość lub właściwości komórki. Wartość rowIndex powinna być liczbą większą lub równą 0 i mniejszą niż liczba wierszy zwrócona przez metodę getNumberOfRows(). columnIndex powinna być liczbą większą lub równą 0 i mniejszą niż liczba kolumn zwracana przez metodę getNumberOfColumns(). value [opcjonalny] to wartość przypisana do określonej komórki. Aby uniknąć zastępowania tej wartości, ustaw wartość tego parametru na undefined. Aby usunąć tę wartość, ustaw ją na null. Typ wartości zależy od typu kolumny (patrz sekcja getcolumnType()): Jeśli kolumna ma typ „string”, wartość powinna być ciągiem znaków. Jeśli typem kolumny jest „liczba”, wartość powinna być liczbą. Jeśli typem kolumny jest „wartość logiczna”, powinna być ona wartością logiczną. Jeśli typ kolumny to „date” lub „date”, wartością powinna być obiekt Date. Jeśli typ kolumny to „timeofday”, wartość powinna być tablicą 4 cyfr: [hour, minutes, second, second, milisekund]. formattedValue [opcjonalny] to ciąg znaków z wartością sformatowaną jako ciąg znaków. Aby uniknąć zastępowania tej wartości, ustaw ten parametr na undefined. Aby usunąć tę wartość i pozwolić interfejsowi API na domyślne zastosowanie formatowania do wartości value, ustaw tę wartość na null. Aby wyraźnie ustawić pustą wartość, ustaw ten ciąg na pusty. Sformatowana wartość jest zwykle używana przez wizualizacje do wyświetlania etykiet wartości. Na przykład sformatowana wartość może być wyświetlana jako tekst etykiety na wykresie kołowym. properties [opcjonalnie] to Object (mapa nazwy/wartości) z dodatkowymi właściwościami tej komórki. Aby uniknąć zastępowania tej wartości, ustaw wartość tego parametru na undefined. Aby usunąć tę wartość, ustaw ją na null. Niektóre wizualizacje obsługują właściwości wierszy, kolumn lub komórek, aby zmienić ich wygląd lub działanie. Aby dowiedzieć się, które właściwości są obsługiwane, zapoznaj się z dokumentacją wizualizacji. Zobacz też: setValue(), setFormattedValue(), setProperty(), setProperties().
setColumnLabel(columnIndex, label)	Brak	Ustawia etykietę kolumny. columnIndex powinna być liczbą większą lub równą 0 i mniejszą niż liczba kolumn zwracana przez metodę getNumberOfColumns(). label to ciąg znaków z etykietą, którą chcesz przypisać do kolumny. Etykieta kolumny jest zwykle wyświetlana jako część wizualizacji. Na przykład etykieta kolumny może być wyświetlana jako nagłówek kolumny w tabeli lub jako legenda na wykresie kołowym. Zobacz też: getcolumnLabel
setColumnProperty(columnIndex, name, value)	Brak	Ustawia właściwość z jedną kolumną. Niektóre wizualizacje obsługują właściwości wierszy, kolumn lub komórek, aby dostosować ich wygląd lub działanie. Aby dowiedzieć się, które właściwości są obsługiwane, zapoznaj się z dokumentacją wizualizacji. columnIndex powinna być liczbą większą lub równą 0 i mniejszą niż liczba kolumn zwracana przez metodę getNumberOfColumns(). name to ciąg znaków o nazwie właściwości. value to wartość dowolnego typu, którą można przypisać do określonej nazwy właściwości określonej kolumny. Zobacz też:setColumnProperties getColumnProperty
setColumnProperties(columnIndex, properties)	Brak	Ustawia wiele właściwości kolumn. Niektóre wizualizacje obsługują właściwości wierszy, kolumn lub komórek, aby dostosować ich wygląd lub działanie. Aby dowiedzieć się, które właściwości są obsługiwane, zapoznaj się z dokumentacją wizualizacji. columnIndex powinna być liczbą większą lub równą 0 i mniejszą niż liczba kolumn zwracana przez metodę getNumberOfColumns(). properties to Object (mapa nazwy/wartości) z dodatkowymi właściwościami w tej kolumnie. Jeśli zasada null jest określona, wszystkie dodatkowe właściwości kolumny zostaną usunięte. Zobacz też: setcolumnProperty getcolumnProperty
setFormattedValue(rowIndex, columnIndex, formattedValue)	Brak	Ustawia sformatowaną wartość komórki. Wartość rowIndex powinna być liczbą większą lub równą 0 i mniejszą niż liczba wierszy zwrócona przez metodę getNumberOfRows(). columnIndex powinna być liczbą większą lub równą 0 i mniejszą niż liczba kolumn zwracana przez metodę getNumberOfColumns(). formattedValue to ciąg znaków z wartością sformatowaną na potrzeby wyświetlania. Aby wyczyścić tę wartość i umożliwić interfejsowi API domyślne zastosowanie jej do wartości komórki, ustaw ją formattedValue null. Aby jawnie ustawić pustą wartość sformatowanego, ustaw ją pusty ciąg. Zobacz też: getFormattedValue
setProperty(rowIndex, columnIndex, name, value)	Brak	Ustawia właściwość komórki. Niektóre wizualizacje obsługują właściwości wierszy, kolumn lub komórek, aby dostosować ich wygląd lub działanie. Aby dowiedzieć się, które właściwości są obsługiwane, zapoznaj się z dokumentacją wizualizacji. Wartość rowIndex powinna być liczbą większą lub równą 0 i mniejszą niż liczba wierszy zwrócona przez metodę getNumberOfRows(). columnIndex powinna być liczbą większą lub równą 0 i mniejszą niż liczba kolumn zwracana przez metodę getNumberOfColumns(). name to ciąg znaków o nazwie właściwości. value to wartość dowolnego typu, którą można przypisać do określonej właściwości nazwanej komórki. Zobacz też: setCell setProperties getProperty
setProperties(rowIndex, columnIndex, properties)	Brak	Ustawia wiele właściwości komórek. Niektóre wizualizacje obsługują właściwości wierszy, kolumn lub komórek, aby dostosować ich wygląd lub działanie. Aby dowiedzieć się, które właściwości są obsługiwane, zapoznaj się z dokumentacją wizualizacji. Wartość rowIndex powinna być liczbą większą lub równą 0 i mniejszą niż liczba wierszy zwrócona przez metodę getNumberOfRows(). columnIndex powinna być liczbą większą lub równą 0 i mniejszą niż liczba kolumn zwracana przez metodę getNumberOfColumns(). properties to Object (mapa nazwy/wartości) z dodatkowymi właściwościami w tej komórce. Jeśli podasz null, wszystkie dodatkowe właściwości komórki zostaną usunięte. Zobacz też: setCell setProperty getProperty
setRowProperty(rowIndex, name, value)	Brak	Ustawia właściwość wiersza. Niektóre wizualizacje obsługują właściwości wierszy, kolumn lub komórek, aby dostosować ich wygląd lub działanie. Aby dowiedzieć się, które właściwości są obsługiwane, zapoznaj się z dokumentacją wizualizacji. Wartość rowIndex powinna być liczbą większą lub równą 0 i mniejszą niż liczba wierszy zwrócona przez metodę getNumberOfRows(). name to ciąg znaków o nazwie właściwości. value to wartość dowolnego typu, którą można przypisać do nazwanej właściwości określonego wiersza. Zobacz też: setRowProperties getRowProperty
setRowProperties(rowIndex, properties)	Brak	Ustawia właściwości wielu wierszy. Niektóre wizualizacje obsługują właściwości wiersza, kolumny lub komórki, aby zmodyfikować ich wyświetlanie lub zachowanie. Informacje o obsługiwanych właściwościach znajdziesz w dokumentacji wizualizacji. Wartość rowIndex powinna być liczbą większą lub równą 0 i mniejszą niż liczba wierszy zwrócona przez metodę getNumberOfRows(). properties to Object (mapa nazwy/wartości) z dodatkowymi właściwościami w tym wierszu. Jeśli podasz null, wszystkie dodatkowe właściwości wiersza zostaną usunięte. Zobacz też: setRowProperty getRowProperty
setTableProperty(name, value)	Brak	Określa właściwość pojedynczej tabeli. Niektóre wizualizacje obsługują właściwości tabeli, wiersza, kolumny lub komórki, aby zmodyfikować ich wyświetlanie lub działanie. Aby sprawdzić, które właściwości są obsługiwane, zapoznaj się z dokumentacją wizualizacji. name to ciąg znaków o nazwie właściwości. value to wartość dowolnego typu, który można przypisać do określonej właściwości nazwanej tabeli. Zobacz też: setTableProperties getTableProperty
setTableProperties(properties)	Brak	Ustawia wiele właściwości tabeli. Niektóre wizualizacje obsługują właściwości tabeli, wiersza, kolumny lub komórki, aby zmodyfikować ich wyświetlanie lub działanie. Aby sprawdzić, które właściwości są obsługiwane, zapoznaj się z dokumentacją wizualizacji. properties to Object (mapa nazwy/wartości) z dodatkowymi właściwościami tabeli. Jeśli wskażesz null, wszystkie dodatkowe właściwości tabeli zostaną usunięte. Zobacz też: setTablePropertygetTableProperty
setValue(rowIndex, columnIndex, value)	Brak	Ustawia wartość komórki. Oprócz zastąpienia istniejącej wartości komórki ta metoda usunie też wszystkie sformatowane wartości i właściwości komórki. Wartość rowIndex powinna być liczbą większą lub równą 0 i mniejszą niż liczba wierszy zwrócona przez metodę getNumberOfRows(). columnIndex powinna być liczbą większą lub równą 0 i mniejszą niż liczba kolumn zwracana przez metodę getNumberOfColumns(). Ta metoda nie umożliwia ustawienia sformatowanej wartości dla tej komórki. W tym celu wywołaj setFormattedValue(). value to wartość przypisana do określonej komórki. Typ zwróconej wartości zależy od typu kolumny (patrz getColumnType): Jeśli kolumna ma typ „string”, wartość powinna być ciągiem znaków. Jeśli typem kolumny jest „liczba”, wartość powinna być liczbą. Jeśli typem kolumny jest „wartość logiczna”, powinna być ona wartością logiczną. Jeśli typ kolumny to „date” lub „date”, wartością powinna być obiekt Date. Jeśli typ kolumny to „timeofday”, wartość powinna być tablicą 4 cyfr: [hour, minutes, second, second, milisekund]. W przypadku każdego typu kolumny wartość może wynosić null. Zobacz też: setCell, setFormattedValue, setProperty, setProperties
sort(sortColumns)	Brak	Sortuje wiersze według określonych kolumn sortowania. DataTable jest zmodyfikowana tą metodą. Opis sortowania znajdziesz w getSortedRows(). Ta metoda nie zwraca posortowanych danych. Zobacz też: getSortujedRows Przykład: aby posortować dane według trzeciej kolumny, a następnie według drugiej, użyj: data.sort([{column: 2}, {column: 1}]);
toJSON()	Ciąg znaków	Zwraca reprezentację JSON obiektu DataTable, którą można przekazywać do konstruktora DataTable. Na przykład: {"cols":[{"id":"Col1","label":"","type":"date"}], "rows":[ {"c":[{"v":"a"},{"v":"Date(2010,10,6)"}]}, {"c":[{"v":"b"},{"v":"Date(2010,10,7)"}]} ] }

Format parametru data JavaScriptu w konstruktorze

Możesz zainicjować DataTable, przekazując dosłowny obiekt JavaScript do parametru data. Nazwimy go obiektem data. Możesz zakodować ten obiekt ręcznie zgodnie z opisem poniżej lub użyć biblioteki pomocniczego w języku Python, jeśli wiesz, jak używać Pythona, a Twoja witryna może z niej korzystać. Jeśli jednak chcesz samodzielnie utworzyć obiekt, ta sekcja opisuje składnię.

Najpierw przyjrzyjmy się przykładowi prostego obiektu JavaScript opisującego tabelę z 3 wierszami i 3 kolumnami (Typy ciągów, Liczba i Daty):

{
  cols: [{id: 'A', label: 'NEW A', type: 'string'},
         {id: 'B', label: 'B-label', type: 'number'},
         {id: 'C', label: 'C-label', type: 'date'}
  ],
  rows: [{c:[{v: 'a'},
             {v: 1.0, f: 'One'},
             {v: new Date(2008, 1, 28, 0, 31, 26), f: '2/28/08 12:31 AM'}
        ]},
         {c:[{v: 'b'},
             {v: 2.0, f: 'Two'},
             {v: new Date(2008, 2, 30, 0, 31, 26), f: '3/30/08 12:31 AM'}
        ]},
         {c:[{v: 'c'},
             {v: 3.0, f: 'Three'},
             {v: new Date(2008, 3, 30, 0, 31, 26), f: '4/30/08 12:31 AM'}
        ]}
  ],
  p: {foo: 'hello', bar: 'world!'}
}

Przyjrzyjmy się składni:

Obiekt data składa się z 2 wymaganych właściwości najwyższego poziomu: cols i rows oraz opcjonalnej właściwości p, która jest mapą dowolnych wartości.

Uwaga: we wszystkich wyświetlanych nazwach właściwości i stałych ciągach znaków wielkość liter ma znaczenie. Poza tym właściwości opisane jako przyjmowanie wartości ciągu powinny być ujęte w cudzysłowy. Jeśli na przykład chcesz podać właściwość „type” jako liczbę, zostanie ona przedstawiona w ten sposób: type: 'number', ale jako wartość liczbowa zostanie przedstawiona w ten sposób: v: 42

Usługa cols

cols to tablica obiektów opisujących identyfikator i typ każdej kolumny. Każda właściwość jest obiektem o następujących właściwościach (wielkość liter ma znaczenie):

• type [wymagany] – typ danych znajdujących się w kolumnie. Obsługuje te wartości ciągu znaków (przykłady zawierają właściwość v: opisaną później):
  • „wartość” – wartość logiczna JavaScript („true” lub „false”). Przykładowa wartość: v:'true'
  • „number” – wartość liczbowa kodu JavaScript. Przykładowe wartości: v:7, v:3.14, v:-55
  • „string” – wartość ciągu tekstowego JavaScript. Przykładowa wartość: v:'hello'
  • „date” – obiekt JavaScript Data (miesiąc oparty na zera) z skróconym czasem. Przykładowa wartość: v:new Date(2008, 0, 15)
  • „timestamp” – obiekt JavaScript z datą i godziną. Przykładowa wartość: v:new Date(2008, 0, 15, 14, 30, 45)
  • „timeofday” – tablica z 3 numerami oraz opcjonalna czwarta przedstawiająca godzinę (0 oznacza północ), minutę, sekundę i opcjonalnie milisekundę. Przykładowe wartości: v:[8, 15, 0], v: [6, 12, 1, 144]
• id [opcjonalny] – identyfikator ciągu kolumn. Wartość musi być niepowtarzalna w tabeli. Używaj podstawowych znaków alfanumerycznych, aby strona hostująca nie wymagała nietypowych zmian znaczenia, aby uzyskać dostęp do kolumny w kodzie JavaScript. Uważaj, aby nie wybrać słowa kluczowego JavaScript. Przykład: id:'col_1'
• label [opcjonalny]: wartość ciągu wyświetlana dla niektórych wizualizacji w tej kolumnie. Przykład: label:'Height'.
• pattern [opcjonalny] – ciąg znaków użyty przez źródło danych do formatu wartości liczbowych, dat lub kolumn czasowych. Ta nazwa jest przeznaczona tylko dla Ciebie. Prawdopodobnie nie musisz czytać wzorca i nie musisz go tworzyć. Klient Google wizualizacji nie używa tej wartości (odczytuje wartość w komórce). Jeśli DataTable pochodzi ze źródła danych w odpowiedzi na zapytanie z klauzulą format, wzorzec określony w tej klauzuli prawdopodobnie zostanie zwrócony z tą wartością. Zalecane standardy wzorca to ICU DecimalFormat i SimpleDateFormat.
• p [Opcjonalny] Obiekt będący mapą wartości niestandardowych zastosowanych w komórce. Wartości te mogą być wartościami dowolnego typu JavaScript. Jeśli Twoja wizualizacja obsługuje jakiekolwiek właściwości na poziomie komórki, zostanie ona opisana, a w przeciwnym razie zostanie zignorowana.Przykład: p:{style: 'border: 1px solid green;'}.

cols Przykład

cols: [{id: 'A', label: 'NEW A', type: 'string'},
       {id: 'B', label: 'B-label', type: 'number'},
       {id: 'C', label: 'C-label', type: 'date'}]

rows Usługa

Właściwość rows zawiera tablicę obiektów wiersza.

Każdy obiekt w wierszu ma 1 wymaganą właściwość o nazwie c, czyli tablicę komórek w danym wierszu. Ma też opcjonalną właściwość p, która definiuje mapę dowolnych wartości niestandardowych, które można przypisać do całego wiersza. Jeśli Twoja wizualizacja obsługuje jakiekolwiek właściwości na poziomie wiersza, będzie je opisać. W przeciwnym razie ta właściwość zostanie zignorowana.

Obiekty komórkowe

Każda komórka w tabeli jest opisana przez obiekt o tych właściwościach:

• v [opcjonalny]: wartość komórki. Typ danych powinien być zgodny z typem danych w kolumnie. Jeśli komórka ma wartość null, właściwość v powinna być pusta, chociaż może zawierać właściwości f i p.
• f [opcjonalny] – wersja ciągu wartości v w formacie sformatowanym na potrzeby wyświetlania. Zwykle wartości są zgodne, chociaż nie muszą, więc jeśli podasz właściwość Date(2008, 0, 1) dla v, musisz podać wartość „1 stycznia 2008 r.” lub podobny ciąg. Ta wartość nie jest porównywana z wartością v. Ta wizualizacja nie będzie używać tej wartości do obliczania, a jedynie jako etykiety wyświetlania. Jeśli nie podasz nazwy, wersja ciągu znaków v zostanie wygenerowana automatycznie za pomocą domyślnego narzędzia do formatowania. Wartości f można modyfikować za pomocą własnego formatowania, ustawić za pomocą setFormattedValue() lub setCell() albo pobrać za pomocą getFormattedValue().
• p [Opcjonalny] Obiekt będący mapą wartości niestandardowych zastosowanych w komórce. Wartości te mogą być wartościami dowolnego typu JavaScript. Jeśli wizualizacja obsługuje właściwości na poziomie komórki, zostanie ona opisana. Te właściwości można pobrać metodą getProperty() i getProperties(). Przykład: p:{style: 'border: 1px solid green;'}.

Komórki w tablicy powinny być ułożone w tej samej kolejności co ich opisy w kolumnie cols. Aby wskazać komórkę o wartości null, możesz określić null, pozostawić pustą komórkę, albo pominąć fragmenty tablicy. Aby więc podać wiersz z wartością null dla pierwszych 2 komórek, możesz podać [ , , {cell_val}] lub [null, null, {cell_val}].

Oto przykładowy obiekt w tabeli z 3 kolumnami wypełnionymi 3 wierszami danych:

{
  cols: [{id: 'A', label: 'NEW A', type: 'string'},
         {id: 'B', label: 'B-label', type: 'number'},
         {id: 'C', label: 'C-label', type: 'date'}
  ],
  rows: [{c:[{v: 'a'},
             {v: 1.0, f: 'One'},
             {v: new Date(2008, 1, 28, 0, 31, 26), f: '2/28/08 12:31 AM'}
        ]},
         {c:[{v: 'b'},
             {v: 2.0, f: 'Two'},
             {v: new Date(2008, 2, 30, 0, 31, 26), f: '3/30/08 12:31 AM'}
        ]},
         {c:[{v: 'c'},
             {v: 3.0, f: 'Three'},
             {v: new Date(2008, 3, 30, 0, 31, 26), f: '4/30/08 12:31 AM'}
        ]}
  ]
}

Usługa p

Właściwość p na poziomie tabeli to mapa wartości niestandardowych zastosowanych do całej DataTable. Wartości te mogą być wartościami dowolnego typu JavaScript. Jeśli Twoja wizualizacja obsługuje jakiekolwiek właściwości na poziomie tabeli, opisuje je. W przeciwnym razie będzie ona dostępna do użycia w aplikacji. Przykład: p:{className: 'myDataTable'}.

Klasa DataView

Widok tylko do odczytu bazowej tabeli danych. DataView umożliwia wybór tylko podzbioru kolumn lub wierszy. Umożliwia również zmienianie kolejności kolumn i wierszy oraz ich duplikowanie.

Widok jest aktywnym oknem na bazowy element DataTable, a nie statycznym obrazem danych. Podczas zmiany struktury tabeli musisz jednak zachować ostrożność:

• Dodanie lub usunięcie kolumn w tabeli bazowej nie zostanie odzwierciedlone w widoku, co może spowodować nieoczekiwane zachowanie w widoku danych. Aby uwzględnić te zmiany, musisz utworzyć nowy DataView w DataTable.
• Dodanie wierszy z tabeli bazowej jest bezpieczne, a zmiany zostaną rozpowszechnione natychmiast w widoku (ale po wystawieniu tej zmiany musisz wywołać metodę draw(), aby ustawić nowy wiersz). Pamiętaj, że jeśli Twój widok odfiltruje wiersze, wywołując jedną z metod setRows() or hideRows(), i dodasz lub usuniesz wiersze z tabeli bazowej, zachowanie jest nieoczekiwane – musisz utworzyć nowy DataView, który będzie odzwierciedlał nową tabelę.
• Zmiana wartości komórek w istniejących komórkach jest bezpieczna, a zmiany są natychmiast rozpowszechniane w środowisku DataView (ale po wprowadzeniu zmiany musisz wywołać metodę draw() w celu wyświetlenia nowych wartości w komórce).

Możesz też utworzyć DataView z innego DataView. Pamiętaj, że gdy pojawia się tabela lub widok danych bazowych, oznacza to poziom bezpośrednio pod tym poziomem. Inaczej mówiąc, odnosi się do obiektu danych używanego do utworzenia tego obiektu DataView.

DataView obsługuje też obliczone kolumny. Są to kolumny, których wartość jest obliczana w czasie rzeczywistym za pomocą podanej przez Ciebie funkcji. Możesz na przykład dodać kolumnę, która jest sumą 2 poprzednich kolumn lub kolumnami, które obliczają i wyświetlają kwartał kalendarzowy daty z innej kolumny. Więcej informacji: setColumns().

Jeśli zmienisz DataView, ukrywając lub pokazując wiersze lub kolumny, wizualizacja nie będzie miała wpływu na wizualizację, dopóki nie wywołasz metody draw() ponownie.

Możesz połączyć DataView.getFilteredRows() z DataView.setRows(), aby utworzyć DataView z interesującym podzbiorem danych, jak pokazano tutaj:

var data = new google.visualization.DataTable();
data.addColumn('string', 'Employee Name');
data.addColumn('date', 'Start Date');
data.addRows(6);
data.setCell(0, 0, 'Mike');
data.setCell(0, 1, new Date(2008, 1, 28));
data.setCell(1, 0, 'Bob');
data.setCell(1, 1, new Date(2007, 5, 1));
data.setCell(2, 0, 'Alice');
data.setCell(2, 1, new Date(2006, 7, 16));
data.setCell(3, 0, 'Frank');
data.setCell(3, 1, new Date(2007, 11, 28));
data.setCell(4, 0, 'Floyd');
data.setCell(4, 1, new Date(2005, 3, 13));
data.setCell(5, 0, 'Fritz');
data.setCell(5, 1, new Date(2007, 9, 2));

// Create a view that shows everyone hired since 2007.
var view = new google.visualization.DataView(data);
view.setRows(view.getFilteredRows([{column: 1, minValue: new Date(2007, 0, 1)}]));
var table = new google.visualization.Table(document.getElementById('test_dataview'));
table.draw(view, {sortColumn: 1});

Zespoły

Nową instancję DataView możesz utworzyć na 2 sposoby:

Konstruktor 1

var myView = new google.visualization.DataView(data)

data

DataTable lub DataView używane do inicjowania widoku. Domyślnie widok zawiera wszystkie kolumny i wiersze w tabeli lub widoku danych podstawowych, w oryginalnej kolejności. Aby ukryć lub wyświetlić wiersze lub kolumny w tym widoku, wywołaj odpowiednie metody set...() lub hide...().

Zobacz również:

setKolumny(), hideKolumny(), setRows(), hideRows().

 

Konstruktor 2

Ten konstruktor tworzy nowy DataView, przypisując zserializowany DataView do DataTable. Pomaga to odtworzyć DataView zserializowany za pomocą DataView.toJSON().

var myView = google.visualization.DataView.fromJSON(data, viewAsJson)

dane

Obiekt DataTable użyty przez Ciebie do utworzenia obiektu DataView, który wywołał metodę DataView.toJSON(). Jeśli ta tabela różni się od pierwotnej tabeli, wyniki będą nieprzewidywalne.

viewAsJson

Ciąg JSON zwracany przez DataView.toJSON(). To jest opis wierszy wyświetlanych lub ukrywanych w tabeli danych data.

Metody

Metoda	Wartość zwrotu	Opis
getColumnId getColumnLabel getColumnPattern getColumnProperty getColumnRange getColumnType getDistinctValues getFilteredRows getFormattedValue getNumberOfColumns getNumberOfRows getProperty getProperties getRowProperty getSortedRows getTableProperty getValue	Zobacz opisy w języku: DataTable.	Podobnie jak w przypadku odpowiednich metod DataTable, ale indeksy wierszy/kolumn odnoszą się do indeksu w widoku danych, a nie do bazowej tabeli/widoku.
getTableColumnIndex(viewColumnIndex)	Liczba	Zwraca indeks w tabeli (lub widoku) danej kolumny określonej przez jej indeks w tym widoku. viewColumnIndex powinna być liczbą większą lub równą 0 i mniejszą niż liczba kolumn zwracana przez metodę getNumberOfColumns(). Zwraca wartość -1, jeśli jest to generowana kolumna. Przykład: jeśli element setColumns([3, 1, 4]) został wcześniej wywołany, getTableColumnIndex(2) zwróci wartość 4.
getTableRowIndex(viewRowIndex)	Liczba	Zwraca indeks w tabeli (lub widoku) danego wiersza określonego przez jego indeks w tym widoku. Wartość viewRowIndex powinna być liczbą większą lub równą 0 i mniejszą niż liczba wierszy zwrócona przez metodę getNumberOfRows(). Przykład: jeśli element setRows([3, 1, 4]) został wcześniej wywołany, getTableRowIndex(2) zwróci wartość 4.
getViewColumnIndex(tableColumnIndex)	Liczba	Zwraca indeks w tym widoku, który jest mapowany na określoną kolumnę określoną w indeksie w tabeli (lub widoku). Jeśli istnieje więcej niż jeden taki indeks, zwraca pierwszy (najniższy) indeks. Jeśli taki indeks nie istnieje (określona kolumna nie jest widoczna w widoku), zwraca -1. Wartość tableColumnIndex powinna być liczbą większą lub równą 0 i mniejszą niż liczba kolumn zwracana przez metodę getNumberOfColumns() tabeli lub widoku tabeli. Przykład: jeśli element setColumns([3, 1, 4]) został wcześniej wywołany, getViewColumnIndex(4) zwróci wartość 2.
getViewColumns()	Tablica liczb	Zwraca kolumny w tym widoku w odpowiedniej kolejności. Oznacza to, że jeśli wywołasz funkcję setColumns z użyciem jakiejś tablicy, a potem wywołasz getViewColumns(), otrzymasz identyczną tablicę.
getViewRowIndex(tableRowIndex)	Liczba	Zwraca indeks w tym widoku, który jest mapowany na dany wiersz określony przez jego indeks w tabeli bazowej (lub widoku). Jeśli istnieje więcej niż jeden taki indeks, zwraca pierwszy (najniższy) indeks. Jeśli taki indeks nie istnieje (określony wiersz nie znajduje się w widoku), zwraca -1. Wartość tableRowIndex powinna być liczbą większą lub równą zeru ani mniejszą niż liczba wierszy zwracana przez metodę getNumberOfRows() tabeli lub widoku. Przykład: jeśli element setRows([3, 1, 4]) został wcześniej wywołany, getViewRowIndex(4) zwróci wartość 2.
getViewRows()	Tablica liczb	Zwraca wiersze w tym widoku w odpowiedniej kolejności. Oznacza to, że jeśli wywołasz funkcję setRows z użyciem jakiejś tablicy, a potem wywołasz getViewRows(), otrzymasz identyczną tablicę.
hideColumns(columnIndexes)	brak	Ukrywa określone kolumny w bieżącym widoku. columnIndexes to tablica liczb reprezentujących indeksy kolumn, które mają być ukryte. Te indeksy to numery indeksów w tabeli/widoku bazowym. Numery w polu columnIndexes nie muszą mieć określonej kolejności (czyli [3,4,1], czyli poprawne). Pozostałe kolumny zachowują kolejność indeksów podczas iteracji. Wpisanie numeru indeksu dla kolumny, która jest już ukryta, nie jest błędem, ale wpisanie indeksu, który nie istnieje w bazowej tabeli lub widoku, spowoduje wyświetlenie błędu. Aby odkryć kolumny, wywołaj funkcję setColumns(). Przykład: jeśli masz tabelę z 10 kolumnami, wywołujesz metodę setColumns([2,7,1,7,9]), a następnie hideColumns([7,9]), kolumny w widoku będą mieć wartość [2,1].
hideRows(min, max)	Brak	Ukrywa w wierszu bieżącego wszystkie wiersze z indeksami, które zawierają wartości od minimalnej do maksymalnej (włącznie). To składnia wygody dla atrybutu hideRows(rowIndexes) powyżej. Na przykład hideRows(5, 10) jest odpowiednikiem hideRows([5, 6, 7, 8, 9, 10]).
hideRows(rowIndexes)	Brak	Ukrywa określone wiersze w bieżącym widoku. rowIndexes to tablica liczb reprezentujących indeksy wierszy do ukrycia. Te indeksy to numery indeksów w tabeli/widoku bazowym. Cyfry w rowIndexes nie muszą występować w kolejności (czyli [3,4,1] jest dopuszczalna). Pozostałe wiersze zachowują kolejność indeksowania. Wpisanie numeru indeksu dla wiersza, który jest już ukryty, nie jest błędem, ale wpisanie indeksu, który nie istnieje w bazowej tabeli lub widoku, spowoduje wyświetlenie błędu. Aby odkryć wiersze, wywołaj setRows(). Przykład: jeśli masz tabelę z 10 wierszami, wywołujesz funkcję setRows([2,7,1,7,9]), a następnie hideRows([7,9]), wiersze w widoku będą mieć wartość [2,1].
setColumns(columnIndexes)	Brak	Określa, które kolumny są widoczne w tym widoku danych. Niewymienione kolumny zostaną ukryte. Jest to tablica indeksów kolumn w bazowej tabeli lub widoku lub obliczonych kolumn. Jeśli nie wywołujesz tej metody, domyślnie wyświetlane są wszystkie kolumny. Tablica może też zawierać duplikaty, aby wyświetlać tę samą kolumnę wiele razy. Kolumny są wyświetlane w określonej kolejności. columnIndexes – tablica liczb lub obiektów (można je łączyć): Liczby określają indeks kolumny danych źródłowych do uwzględnienia w widoku. Dane są dostarczane bez zmian. Jeśli musisz wyraźnie określić rolę lub dodatkowe właściwości kolumny, określ obiekt za pomocą właściwości sourceColumn. Obiekty określają kolumnę obliczoną. Obliczona kolumna tworzy wartość w czasie rzeczywistym dla każdego wiersza i dodaje ją do widoku. Obiekt musi mieć te właściwości: calc [funkcja] – funkcja, która będzie wywoływana w każdym wierszu w kolumnie w celu obliczenia wartości w tej komórce. Podpis funkcji to func(dataTable, row), gdzie dataTable to źródło DataTable, a row to indeks wiersza danych źródłowych. Funkcja powinna zwracać pojedynczą wartość typu określonego przez type. type [ciąg znaków] – typ JavaScriptu wartości zwracanej przez funkcję calc. label [opcjonalny, ciąg znaków] – opcjonalna etykieta, którą można przypisać do wygenerowanej kolumny. Jeśli nie zostanie określony, kolumna widoku nie będzie miała etykiety. id [opcjonalny, ciąg znaków] – opcjonalny identyfikator, który można przypisać do wygenerowanej kolumny. sourceColumn – [opcjonalny, liczba] kolumna źródłowa używana jako wartość. Jeśli zostanie określona, nie określa właściwości calc ani type. Działa to podobnie do przekazywania liczby zamiast obiektu, ale w tej kolumnie pozwala określić rolę i właściwości nowej kolumny. properties [opcjonalny, object] – obiekt zawierający dowolne właściwości, które można przypisać do tej kolumny. Jeśli jej nie określisz, kolumna widoku danych nie będzie miała żadnych właściwości. role [opcjonalny, ciąg znaków] – rola do przypisania do tej kolumny. Jeśli nie określisz tej roli, istniejąca rola nie zostanie zaimportowana. Przykłady: // Show some columns directly from the underlying data. // Shows column 3 twice. view.setColumns([3, 4, 3, 2]); // Underlying table has a column specifying a value in centimeters. // The view imports this directly, and creates a calculated column // that converts the value into inches. view.setColumns([1,{calc:cmToInches, type:'number', label:'Height in Inches'}]); function cmToInches(dataTable, rowNum){ return Math.floor(dataTable.getValue(rowNum, 1) / 2.54); }
setRows(min, max)	Brak	Ustawia wiersze tego widoku jako wszystkie indeksy (w tabeli bazowej/widoku), które mieszczą się w zakresie od minimalnej do maksymalnej (włącznie). To składnia wygody dla setRows(rowIndexes) poniżej. Na przykład setRows(5, 10) jest odpowiednikiem setRows([5, 6, 7, 8, 9, 10]).
setRows(rowIndexes)	Brak	Ustawia widoczne wiersze w tym widoku na podstawie numerów indeksów z tabeli/widoku danych. rowIndexes powinien być tablicą numerów indeksów określających, które wiersze mają być wyświetlane w widoku. Tablica określa kolejność wyświetlania wierszy, a wiersze mogą być zduplikowane. Pamiętaj, że zostaną wyświetlone tylko wiersze określone w polu rowIndexes. Ta metoda powoduje usunięcie wszystkich innych wierszy z widoku. Tablica może też zawierać duplikaty, co spowoduje duplikowanie określonego wiersza w tym widoku (np. setRows([3, 4, 3, 2]) spowoduje, że wiersz 3 pojawi się w nim dwukrotnie). Tablica zapewnia więc mapowanie wierszy z bazowej tabeli/widoku do tego widoku. Aby wygenerować dane wejściowe tej metody, możesz użyć getFilteredRows() lub getSortedRows(). Przykład: aby utworzyć widok z wierszami 3 i zerem bazowej tabeli/widoku: view.setRows([3, 0])
toDataTable()	Tabela danych	Zwraca obiekt DataTable zawierający widoczne wiersze i kolumny DataView.
toJSON()	tekst	Zwraca ciąg znaków reprezentujący element DataView. Ten ciąg znaków nie zawiera rzeczywistych danych. Zawiera tylko ustawienia dotyczące elementu DataView, takie jak widoczne wiersze i kolumny. Możesz zapisać ten ciąg znaków i przekazać go do statycznego konstruktora DataView.fromJSON(), aby odtworzyć ten widok. Nie obejmuje to wygenerowanych kolumn.

Klasa GrafWrapper

Klasa ChartWrapper służy do opakowywania wykresu i obsługiwania wszystkich zapytań dotyczących rysowania, rysowania i źródeł danych na wykresie. Klasa udostępnia metody wygodne do ustawiania wartości na wykresie i rysowania. Ta klasa upraszcza odczyt ze źródła danych, ponieważ nie musisz tworzyć modułu obsługi wywołania zwrotnego zapytania. Możesz go też użyć, aby łatwo zapisać wykres do ponownego wykorzystania.

Inną zaletą korzystania z ChartWrapper jest to, że możesz zmniejszyć liczbę bibliotek, używając dynamicznego wczytywania. Nie musisz też wczytywać pakietów, ponieważ ChartWrapper zajmie się wyszukiwaniem i wczytywaniem wykresów dla Ciebie. Szczegółowe informacje znajdziesz w przykładach poniżej.

Obecnie jednak ChartWrapper udostępnia tylko podzbiór zdarzeń wywoływanych przez wykresy: wybierz, gotowy i błąd. Inne zdarzenia nie są przesyłane przez instancję ChartWrapper. Aby uzyskać pozostałe zdarzenia, musisz wywołać metodę getChart() i zasubskrybować zdarzenia bezpośrednio na grafice, jak w tym przykładzie:

var wrapper;
function drawVisualization() {

  // Draw a column chart
  wrapper = new google.visualization.ChartWrapper({
    chartType: 'ColumnChart',
    dataTable: [['Germany', 'USA', 'Brazil', 'Canada', 'France', 'RU'],
                [700, 300, 400, 500, 600, 800]],
    options: {'title': 'Countries'},
    containerId: 'visualization'
  });

  // Never called.
  google.visualization.events.addListener(wrapper, 'onmouseover', uselessHandler);

  // Must wait for the ready event in order to
  // request the chart and subscribe to 'onmouseover'.
  google.visualization.events.addListener(wrapper, 'ready', onReady);

  wrapper.draw();

  // Never called
  function uselessHandler() {
    alert("I am never called!");
  }

  function onReady() {
    google.visualization.events.addListener(wrapper.getChart(), 'onmouseover', usefulHandler);
  }

  // Called
  function usefulHandler() {
    alert("Mouseover event!");
  }
}

Zespół

ChartWrapper(opt_spec)

opt_spec

[Opcjonalny] – obiekt JSON definiujący wykres lub zserializowany ciąg znaków obiektu. Format tego obiektu jest podany w dokumentacji drawChart(). Jeśli nie określisz stanu, musisz ustawić wszystkie odpowiednie właściwości za pomocą metod set... ujawnionych przez ten obiekt.

Metody

ChartWrapper udostępnia te dodatkowe metody:

Metoda	Typ zwracanej wartości	Opis
draw(opt_container_ref)	Brak	Rysuje wykres. Aby wyświetlić tę metodę, po wprowadzeniu zmian na wykresie lub w danych musisz wywołać tę metodę. opt_container_ref [opcjonalny] – odwołanie do prawidłowego elementu kontenera na stronie. Jeśli określisz wykres, zostanie tam wyświetlony wykres. Jeśli nie, wykres zostanie narysowany w elemencie o identyfikatorze określonym w containerId.
toJSON()	Ciąg znaków	Zwraca ciąg znaków reprezentujący wykres w formacie JSON.
clone()	ChartWrapper	Zwraca głęboką kopię kodu wykresu.
getDataSourceUrl()	Ciąg znaków	Jeśli ten wykres pobiera dane ze źródła danych, zwraca adres URL tego źródła danych. W przeciwnym razie zwraca wartość null.
getDataTable()	google.visualization.DataTable	Jeśli ten wykres pobiera dane z lokalnie zdefiniowanego atrybutu DataTable, zwróci odwołanie do DataTable wykresu. Jeśli ten wykres pobiera dane ze źródła danych, zwróci wartość zero. Wszystkie zmiany, które wprowadzisz w zwróconym obiekcie, zostaną odzwierciedlone na wykresie przy następnym wywołaniu ChartWrapper.draw().
getChartType()	Ciąg znaków	Nazwa klasy opakowanego wykresu. Jeśli jest to wykres Google, nazwa nie będzie kwalifikować się do obiektu google.visualization. Jeśli na przykład byłby to wykres drzewa, zwróciłby „Treemap”, a nie „google.visualization.treemap”.
getChartName()	Ciąg znaków	Zwraca nazwę wykresu przypisanego przez setChartName().
getChart()	Odwołanie do obiektu wykresu	Zwraca odwołanie do wykresu utworzonego przez ten ChartWrapper, na przykład google.visualization.BarChart lub google.visualization.ColumnChart . Zwracana wartość będzie pusta, dopóki nie wywołasz obiektu draw() w obiekcie ChartWrapper, a zdarzenie zwróci gotowe. Metody wywoływane w zwróconym obiekcie będą odzwierciedlone na stronie.
getContainerId()	Ciąg znaków	Identyfikator elementu kontenera DOM wykresu.
getQuery()	Ciąg znaków	Ciąg zapytania dla tego wykresu (jeśli go ma) i wysyła zapytanie do źródła danych.
getRefreshInterval()	Liczba	Każdy interwał odświeżania tego wykresu, jeśli wysyła zapytanie do źródła danych. Zero oznacza brak odświeżania.
getOption(key, opt_default_val)	Dowolny typ	Zwraca podaną wartość opcji wykresu key – nazwa opcji do pobrania. Może być odpowiednią nazwą, na przykład 'vAxis.title'. opt_default_value [opcjonalny] – jeśli nieokreślona lub nieokreślona wartość jest zwracana, ta wartość zostanie zwrócona.
getOptions()	obiekt	Zwraca obiekt opcji na tym wykresie.
getView()	Obiekt LUB tablica	Zwraca obiekt inicjujący DataView w formacie takim jak dataview.toJSON() lub tablicę takich obiektów.
setDataSourceUrl(url)	Brak	Ustawia adres URL źródła danych, którego chcesz użyć na tym wykresie. Jeśli ustawisz też tabelę danych dla tego obiektu, adres URL źródła danych zostanie zignorowany.
setDataTable(table)	Brak	Ustawia tabelę danych na wykresie. Przekaż jedną z tych wartości: null; obiekt DataTable; reprezentacja JSON tabeli danych lub tablica po składni funkcji arrayToDataTable().
setChartType(type)	Brak	Określa typ wykresu. Przekaż nazwę klasy opakowanego wykresu. Jeśli to jest wykres Google, nie zakwalifikuj go w google.visualization. Na przykład w przypadku wykresu kołowego podaj wykres kołowy.
setChartName(name)	Brak	Ustawia dowolną nazwę wykresu. Nie jest on widoczny w żadnym miejscu na wykresie, chyba że chcesz go użyć jako niestandardowego wykresu.
setContainerId(id)	Brak	Ustawia identyfikator zawierającego element DOM wykresu.
setQuery(query_string)	Brak	Ustawia ciąg zapytania, jeśli ten wykres wysyła zapytania do źródła danych. Jeśli podajesz tę wartość, musisz też ustawić URL źródła danych.
setRefreshInterval(interval)	Brak	Ustawia częstotliwość odświeżania tego wykresu, jeśli wysyła zapytanie do źródła danych. Jeśli podajesz tę wartość, musisz też ustawić URL źródła danych. Zero oznacza brak odświeżania.
setOption(key, value)	Brak	Określa wartość pojedynczego wykresu, gdzie klucz to nazwa opcji, a wartość jest wartością. Aby usunąć wybór opcji, przekaż wartość null. Pamiętaj, że klucz może być odpowiednią nazwą, na przykład 'vAxis.title'.
setOptions(options_obj)	Brak	Ustawia obiekt kompletnych opcji wykresu.
setView(view_spec)	Brak	Ustawia obiekt inicjujący DataView, który działa jak filtr bazujący na danych. Kod, który zostanie zastosowany do tego widoku, musi zawierać dane bazowe z tabeli danych lub źródła danych. Możesz przekazać obiekt inicjujący ciąg znaków lub DataView, tak jak zwracany jest obiekt dataview.toJSON(). Możesz też przekazać tablicę obiektów inicjujących DataView. W takim przypadku pierwszy DataView w tablicy jest stosowany do bazowych danych w celu utworzenia nowej tabeli danych, drugi DataView jest zastosowany do tabeli danych w wyniku zastosowania pierwszego obiektu DataView itd.

Zdarzenia

Obiekt ChartWrapper generuje opisane poniżej zdarzenia. Pamiętaj, że aby wywołać zdarzenie, musisz wywołać metodę ChartWrapper.draw().

Nazwa	Opis	Usługi
error	Uruchamiane, gdy podczas próby renderowania wykresu wystąpi błąd.	id, message,
ready	Wykres jest gotowy do wywołań metod zewnętrznych. Jeśli chcesz korzystać z wykresu i wywoływać metody po narysowaniu, musisz skonfigurować odbiornik tego zdarzenia przed wywołaniem metody draw i wywołanie ich dopiero po uruchomieniu zdarzenia.	Brak
select	Uruchamiane, gdy użytkownik kliknie pasek lub legendę. Jeśli wybrany jest element wykresu, zostanie wybrana odpowiednia komórka w tabeli danych. Po wybraniu legendy wybrana zostanie też odpowiednia kolumna w tabeli danych. Aby dowiedzieć się, co zostało wybrane, zadzwoń pod numer ChartWrapper.getChart().getSelection(). Zwróć uwagę, że ten typ zostanie wyświetlony tylko wtedy, gdy typ bazowego wykresu wywoła zdarzenie wyboru.	Brak

Przykład

Te 2 fragmenty tworzą równoważny wykres liniowy. W pierwszym przykładzie do zdefiniowania wykresu użyto notacji literału JSON. W drugim przypadku do ustawienia tych wartości użyto metod ChartWrapper.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Visualization API Sample</title>
<!--
  One script tag loads all the required libraries!
-->
<script type="text/javascript"
      src='https://www.gstatic.com/charts/loader.js'></script>
<script>
  google.charts.load('current);
  google.charts.setOnLoadCallback(drawVisualization);

  function drawVisualization() {
    var wrap = new google.visualization.ChartWrapper({
       'chartType':'LineChart',
       'dataSourceUrl':'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
       'containerId':'visualization',
       'query':'SELECT A,D WHERE D > 100 ORDER BY D',
       'options': {'title':'Population Density (people/km^2)', 'legend':'none'}
       });
     wrap.draw();
  }
</script>
</head>
<body>
  <div id="visualization" style="height: 400px; width: 400px;"></div>
</body>
</html>

Ten sam wykres, teraz przy użyciu metod ustawiania:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='content-type' content='text/html; charset=utf-8'/>
<title>Google Visualization API Sample</title>
<!-- One script tag loads all the required libraries!
-->
<script type="text/javascript"
    src='https://www.gstatic.com/charts/loader.js'></script>
<script type="text/javascript">
  google.charts.load('current');
  google.charts.setOnLoadCallback(drawVisualization);
  function drawVisualization() {
    // Define the chart using setters:
    var wrap = new google.visualization.ChartWrapper();
    wrap.setChartType('LineChart');
    wrap.setDataSourceUrl('http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1');
    wrap.setContainerId('visualization');
    wrap.setQuery('SELECT A,D WHERE D > 100 ORDER BY D');
    wrap.setOptions({'title':'Population Density (people/km^2)', 'legend':'none'});
    wrap.draw();
  }
</script>
</head>
<body>
  <div id='visualization' style='height: 400px; width: 400px;'></div>
</body>
</html>

Klasa edytora wykresów

Klasa ChartEditor służy do otwierania okna na stronie, które pozwala użytkownikowi na bieżąco dostosowywać wizualizację.

Aby użyć narzędzia ChartEditor:

1. Wczytaj pakiet charteditor. W pliku google.charts.load() wczytaj pakiet „grapheditor”. Nie musisz wczytywać pakietów używanych w przypadku typu wykresu renderowanego w edytorze. W razie potrzeby wczytuje on za Ciebie pakiety.
2. Utwórz obiekt ChartWrapper definiujący wykres, który użytkownik może dostosować. Ten wykres będzie widoczny w oknie dialogowym, a użytkownik użyje edytora, aby zmodyfikować projekt, zmienić typ wykresu, a nawet zmienić dane źródłowe.
3. Utwórz nową instancję ChartEditor i zarejestruj się, aby nasłuchiwać zdarzenia „ok”. To zdarzenie jest wysyłane, gdy użytkownik kliknie w oknie przycisk „OK”. Po otrzymaniu wywołania należy wywołać metodę ChartEditor.getChartWrapper(), aby pobrać wykres zmodyfikowany przez użytkownika.
4. Zadzwoń do: ChartEditor.openDialog(), przekazując: ChartWrapper. Otworzy się okno. Przyciski okien umożliwiają użytkownikowi zamknięcie edytora. Instancja ChartEditor jest dostępna, jeśli znajduje się w zakresie. Nie zostanie automatycznie zniszczona, gdy użytkownik zamknie okno.
5. Aby zaktualizować wykres w kodzie, wywołaj funkcję setChartWrapper().

Metody

Metoda	Wartość zwrotu	Opis
openDialog(chartWrapper, opt_options)	brak	Otwiera edytor wykresów jako umieszczone okno na stronie. Funkcja jest zwracana natychmiast – nie czeka na zamknięcie okna dialogowego. Jeśli nie stracisz zakresu instancji, możesz ponownie wywołać openDialog(), aby ponownie otworzyć okno, ale musisz jeszcze raz przekazać obiekt ChartWrapper. graphWrapper – obiekt ChartWrapper definiujący początkowy wykres, który ma być wyświetlany w oknie. Wykres musi zawierać wypełnione pole DataTable lub być połączone z prawidłowym źródłem danych. Ten kod jest wewnętrznie skopiowany do edytora wykresów, więc wszelkie dalsze zmiany w nicku ChartWrapper nie zostaną odzwierciedlone w kopii edytora wykresu. opt_option – [opcjonalny] obiekt zawierający wszelkie opcje edytora wykresów. Zobacz poniższą tabelę opcji.
getChartWrapper()	ChartWrapper	Zwraca wartość ChartWrapper reprezentującą wykres z modyfikacjami użytkownika.
setChartWrapper(chartWrapper)	brak	Korzystając z tej metody, możesz zaktualizować wyrenderowany wykres w edytorze. schemaWrapper – obiekt ChartWrapper reprezentujący nowy wykres do renderowania. Wykres musi zawierać wypełnione pole DataTable lub być połączone z prawidłowym źródłem danych.
closeDialog()	brak	Zamyka okno edytora wykresu.

Opcje

Edytor wykresów obsługuje te opcje:

Nazwa	Typ	Domyślna	Opis
dataSourceInput	Nick elementu lub „urlbox”	brak	Umożliwia użytkownikowi określenie źródła danych wykresu. Ta właściwość może mieć jedną z 2 wartości: 'urlbox' – pokazuje adres URL źródła danych wykresu w oknie dialogowym w polu tekstowym, który można edytować. Użytkownik może to zmienić, a wykres zostanie ponownie wygenerowany na podstawie nowego źródła danych. Element DOM – umożliwia przesłanie niestandardowego elementu HTML służącego do wybierania źródła danych. Przekaż uchwyt do elementu HTML: utworzonego w kodzie lub skopiowanego ze strony. Ten element będzie wyświetlany w oknie. Pozwala to użytkownikowi wybrać źródło danych wykresu. Możesz na przykład utworzyć pole listy zawierające kilka adresów URL źródeł danych lub proste nazwy, które użytkownik może wybrać. Element musi zaimplementować moduł obsługi wyboru i użyć go do zmiany źródła danych wykresu, np. może to być wprowadzenie zmian w polu DataTable lub zmodyfikowanie pola dataSourceUrl na wykresie.

Zdarzenia

Edytor wykresów generuje te zdarzenia:

Nazwa	Opis	Usługi
ok	Uruchamiane, gdy użytkownik kliknie w oknie przycisk „OK”. Po otrzymaniu tej metody wywołaj funkcję getChartWrapper(), aby pobrać wykres skonfigurowany przez użytkownika.	brak
cancel	Uruchamiane, gdy użytkownik kliknie w oknie dialogowym przycisk „Anuluj”.	brak

Przykład

Ten przykładowy kod otwiera okno edytora wykresu z wypełnionym wykresem liniowym. Jeśli użytkownik kliknie „OK”, edytowany wykres zostanie zapisany w <div> w witrynie.

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  <title>
    Google Visualization API Sample
  </title>
  <script type="text/javascript"
    src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {packages: ['charteditor']});
  </script>
  <script type="text/javascript">
    google.charts.setOnLoadCallback(loadEditor);
    var chartEditor = null;

    function loadEditor() {
      // Create the chart to edit.
      var wrapper = new google.visualization.ChartWrapper({
         'chartType':'LineChart',
         'dataSourceUrl':'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
         'query':'SELECT A,D WHERE D > 100 ORDER BY D',
         'options': {'title':'Population Density (people/km^2)', 'legend':'none'}
      });

      chartEditor = new google.visualization.ChartEditor();
      google.visualization.events.addListener(chartEditor, 'ok', redrawChart);
      chartEditor.openDialog(wrapper, {});
    }

    // On "OK" save the chart to a <div> on the page.
    function redrawChart(){
      chartEditor.getChartWrapper().draw(document.getElementById('vis_div'));
    }

  </script>
</head>
<body>
  <div id="vis_div" style="height: 400px; width: 600px;"></div>
</body>
</html>

Metody manipulowania danymi

Przestrzeń nazw google.visualization.data zawiera metody statyczne do wykonywania operacji przypominających SQL na obiektach DataTable, takich jak dołączanie do nich lub grupowanie według wartości kolumny.

Przestrzeń nazw google.visualization.data udostępnia te metody:

Metoda	Opis
google.visualization.data.group	Wykonuje działanie SQL GROUP BY, aby zwrócić tabelę pogrupowaną według wartości w określonych kolumnach.
google.visualization.data.join	Łączy 2 tabele danych w co najmniej 1 kluczowej kolumnie.

group()

Pobiera zapełniony obiekt DataTable i wykonuje operację podobną do SQL GROUP BY, która zwraca tabelę z wierszami pogrupowanymi według określonych wartości kolumn. Nie spowoduje to zmiany danych wejściowych DataTable.

Zwracana tabela zawiera po 1 wierszu na każdą kombinację wartości w określonych kolumnach kluczowych. Każdy wiersz zawiera kolumny z kluczami oraz jedną kolumnę ze łączną wartością kolumny we wszystkich wierszach pasujących do kombinacji kluczy (np. sumę lub liczbę wszystkich wartości w określonej kolumnie).

Przestrzeń nazw google.visualization.data zawiera kilka przydatnych wartości agregacji (np. sum i count), ale możesz zdefiniować własną (np. standardDeviation lub secondHighest). Instrukcje definiowania własnego agregatora są dostępne po opisie metody.

Składnia

google.visualization.data.group(data_table, keys, columns)

tabela_danych

Dane wejściowe DataTable. Nie zostanie to zmienione przez wywołanie group().

klucze

Tablica tablic lub obiektów określająca, które kolumny mają być grupowane. Tabela wyników zawiera wszystkie kolumny w tej tablicy, a także wszystkie kolumny w kolumnach. Jeśli jest to liczba, jest to indeks kolumnowy danych wejściowych DataTable, według których grupowane są dane. Jeśli obiekt będzie zawierać funkcję, która może modyfikować określoną kolumnę (np. dodać 1 do wartości w tej kolumnie). Obiekt musi mieć te właściwości:

• column – liczba, która jest indeksem kolumn z wartości dt, do której ma zostać zastosowane przekształcenie.
• modyfikator – funkcja, która przyjmuje jedną wartość (wartość komórki w każdej kolumnie w każdym wierszu) i zwraca zmodyfikowaną wartość. Ta funkcja służy do zmieniania wartości kolumny, która ułatwia grupowanie w ten sposób: np. wywoływanie funkcji whatQuarter, która oblicza kwartał na podstawie kolumny daty, aby interfejs API mógł grupować wiersze według kwartału. Obliczona wartość jest wyświetlana w kolumnach kluczy w zwróconej tabeli. Funkcja może być zadeklarowana wbudowana w ten obiekt lub może być zdefiniowana w innym miejscu kodu (musi mieścić się w zakresie wywołań). Interfejs API udostępnia jedną prostą funkcję modyfikatora. Tutaj znajdziesz instrukcje tworzenia własnych, bardziej użytecznych funkcji. Musisz znać typ danych, który ta funkcja może przyjmować, i wywoływać go tylko w kolumnach tego typu. Musisz też znać typ zwracania tej funkcji i zadeklarować ją we właściwości type opisanej poniżej.
• type – typ zwracany przez funkcję modyfikatora funkcji. Powinna to być nazwa typu ciągu JavaScript, np. „number” lub „wartość”.
• label – [opcjonalny] etykieta ciągu znaków, która ma przypisać tę kolumnę w zwróconych danych DataTable.
• id – [opcjonalny] identyfikator ciągu znaków, który ma przypisać tę kolumnę w zwróconej wartości DataTable.

Przykłady: [0], [0,2], [0,{column:1, modifier:myPlusOneFunc, type:'number'},2]

kolumny,

[Opcjonalny] – pozwala określić, które kolumny oprócz tabeli najważniejszych danych mają być uwzględnione w tabeli wyjściowej. Wszystkie wiersze w grupie wierszy są skompresowane w jeden wiersz, więc musisz określić wartość wyświetlaną w tej grupie. Możesz na przykład wyświetlić wartość kolumny z pierwszego wiersza w zestawie lub średnią wszystkich wierszy w tej grupie. Kolumny to tablica obiektów o tych właściwościach:

• column – liczba określająca indeks kolumny do wyświetlenia.
• agregacja – funkcja, która akceptuje tablicę wszystkich wartości w tej kolumnie z tej grupy wierszy i zwraca pojedynczą wartość do wyświetlenia w wierszu wyniku. Wartość zwrócona musi być typem określonym przez właściwość type obiektu. Poniżej znajdziesz szczegóły tworzenia własnej funkcji agregacji. Musisz wiedzieć, jakie typy danych akceptuje ta metoda, i wywoływać je tylko w kolumnach odpowiedniego typu. Interfejs API udostępnia kilka przydatnych funkcji agregacji. Listę znajdziesz w sekcji Dostępne funkcje agregacji lub Tworzenie funkcji agregacji, aby dowiedzieć się, jak napisać własną funkcję agregacji.
• type – typ zwracania funkcji agregacji. Powinna to być nazwa typu ciągu JavaScript, np. „liczba” lub „wartość logiczna”.
• label – [opcjonalny] etykieta ciągu znaków stosowana do tej kolumny w zwróconej tabeli.
• id – [opcjonalny] identyfikator ciągu znaków, który zostanie zastosowany w tej kolumnie w zwróconej tabeli.

Zwrócona wartość

DataTable z jedną kolumną dla każdej kolumny wymienionej w kluczach i jedną kolumną dla każdej kolumny wymienionej w kolumnach. Tabela jest posortowana według wierszy kluczowych od lewej do prawej.

Przykład

// This call will group the table by column 0 values.
// It will also show column 3, which will be a sum of
// values in that column for that row group.
var result = google.visualization.data.group(
  dt,
  [0],
  [{'column': 3, 'aggregation': google.visualization.data.sum, 'type': 'number'}]
);

*Input table*
1  'john'  'doe'            10
1  'jane'  'doe'           100
3  'jill'  'jones'          50
3  'jack'  'jones'          75
5  'al'    'weisenheimer'  500

*Output table*
1  110
3  125
5  500

Podane funkcje modyfikatora

Interfejs API udostępnia te funkcje modyfikatora, które możesz przekazywać do kluczy. modifier, aby dostosować działanie grupowania.

Funkcja	Typ tablicy wejściowej	Typ zwracanej wartości	Opis
google.visualization.data.month	Data	liczba	Dla danego dnia zostanie zwrócona wartość zera miesiąca (0, 1, 2 itd.).

Dostępne funkcje agregacji

Interfejs API udostępnia poniższe funkcje agregacji, które możesz przekazać do kolumn. tablicy agregacji.

Funkcja	Typ tablicy wejściowej	Typ zwracanej wartości	Opis
google.visualization.data.avg	liczba	liczba	Średnia wartość przekazanej tablicy.
google.visualization.data.count	dowolny typ	liczba	Liczba wierszy w grupie. Zliczane są zduplikowane wartości.
google.visualization.data.max	liczba, ciąg znaków, data	liczba, ciąg znaków, data, wartość null	Maksymalna wartość w tablicy. W przypadku ciągów tekstowych jest to pierwszy element na liście leksykograficznie. W przypadku wartości daty jest to najnowsza data. Wartości null są ignorowane. Jeśli nie ma limitu, zwraca wartość null.
google.visualization.data.min	liczba, ciąg znaków, data	liczba, ciąg znaków, data, wartość null	Minimalna wartość w tablicy. W przypadku ciągów tekstowych jest to ostatni element na liście leksykograficznie, a w przypadku wartości daty jest najwcześniejsza data. Wartości null są ignorowane. Jeśli nie ma wartości minimalnej, zwraca wartość null.
google.visualization.data.sum	liczba	liczba	Suma wszystkich wartości w tablicy.

Tworzenie funkcji modyfikatora

Możesz utworzyć funkcję modyfikatora, aby przeprowadzić prostą transformację par klucz-wartość, zanim funkcja group() zgrupuje wiersze. Ta funkcja pobiera pojedynczą wartość z komórki, wykonuje z nią działanie (np. dodaje do niej 1) i zwraca tę wartość. Typ danych wejściowych i zwrotowych nie musi być taki sam, ale wywołujący muszą znać typy danych wejściowych. Oto przykład funkcji, która akceptuje datę i zwraca kwartał:

// Input type: Date
// Return type: number (1-4)
function getQuarter(someDate) {
  return Math.floor(someDate.getMonth()/3) + 1;
}

Tworzenie funkcji agregacji

Możesz utworzyć funkcję agregacji, która akceptuje zestaw wartości kolumn w grupie wierszy i zwraca pojedynczą liczbę, np. zwraca liczbę lub średnią wartości. Oto implementacja funkcji agregacji podanej, która zwraca liczbę wierszy w grupie wierszy:

// Input type: Array of any type
// Return type: number
function count(values) {
  return values.length;
}

Dołącz()

Ta metoda łączy 2 tabele danych (obiekty DataTable lub DataView) w jedną tabelę wyników, podobnie jak w instrukcji SQL Dołącz. Możesz określić co najmniej jedną parę kolumn (klucz) między obiema tabelami, a tabela wyjściowa zawiera wiersze zgodnie z określoną przez Ciebie metodą łączenia: tylko wiersze, w których pasują oba klucze, wszystkie wiersze w jednej tabeli lub wszystkie wiersze z obu tabel, niezależnie od tego, czy klucze są ze sobą zgodne. Tabela wyników zawiera tylko najważniejsze kolumny i dodatkowe kolumny, które określisz. Pamiętaj, że dt2 nie może mieć zduplikowanych kluczy, ale dt1 może. Określenie „klucz” oznacza połączenie wszystkich wartości kolumn kluczowych, a nie określonej wartości kolumny kluczy. Jeśli więc wiersz zawiera wartości komórki A | B | C, a kolumny 0 i 1 są kolumnami kluczowymi, klucz w tym wierszu to „AB”.

Składnia

google.visualization.data.join(dt1, dt2, joinMethod,
                                 keys, dt1Columns, dt2Columns);

DT1

Pole DataTable wypełnione za pomocą dt2.

DT2

Pole DataTable wypełnione za pomocą dt1. Ta tabela nie może mieć wielu identycznych kluczy (gdzie klucz to kombinacja wartości kolumn).

joinMethod

Ciąg określający typ złączenia. Jeśli dt1 ma wiele wierszy pasujących do wiersza dt2, tabela wyjściowa będzie zawierać wszystkie pasujące wiersze dt1. Wybierz jedną z tych wartości:

• „full” – tabela wyjściowa zawiera wszystkie wiersze z obu tabel, niezależnie od tego, czy klucze są ze sobą zgodne. Niedopasowane wiersze będą zawierać wpisy o wartości null. Połączone wiersze będą ze sobą połączone.
• „internal” – pełne filtrowanie przefiltrowane tak, aby uwzględniało tylko wiersze z kluczami.
• „left” – tabela wyjściowa zawiera wszystkie wiersze z pliku dt1, niezależnie od tego, czy istnieją pasujące wiersze z dt2.
• „right” – tabela wyjściowa zawiera wszystkie wiersze z dt2, niezależnie od tego, czy istnieją pasujące wiersze z dt1.

klucze

Tablica kolumn z kluczami do porównania. Każda para to tablica dwuelementowa. Pierwszy to klucz w dt1, a drugi w dt2. W tej tablicy można określić kolumny na podstawie indeksu, identyfikatora lub etykiety (patrz getColumnIndex).
Kolumny w obu tabelach muszą być tego samego typu. Aby można było uwzględnić wiersz z tabeli, wszystkie określone klucze muszą być zgodne zgodnie z regułą podaną w metodzie joinMethod. Najważniejsze kolumny są zawsze zawarte w tabeli wyjściowej. Tylko tabela dt1 (po lewej stronie) może zawierać zduplikowane klucze. Klucze w pliku dt2 muszą być unikalne. Termin „klucz” oznacza unikalny zestaw kolumn, a nie wartości poszczególnych kolumn. Jeśli np. kolumny kluczy to A i B, w tabeli wymienionej niżej byłyby tylko unikalne wartości klucza (dlatego można ich używać jako dt2):

O	B
Jen	Czerwony
Jen	Niebieski
Fred	Czerwony

Przykład: [[0,0], [2,1]] porównuje wartości z pierwszej kolumny w obu tabelach oraz trzeciej kolumny z dt1 i drugiej kolumny z dt2.

Kolumny dt1

Tablica kolumn z dt1 do uwzględnienia w tabeli wyjściowej oprócz kolumn z kolumnami dt1. W tej tablicy można określić kolumny według indeksu, identyfikatora lub etykiety (patrz getColumnIndex).

Kolumny dt2

Tablica kolumn z dt2 do uwzględnienia w tabeli wyjściowej, oprócz kolumn dt2. W tej tablicy można określić kolumny według indeksu, identyfikatora lub etykiety (patrz getColumnIndex).

Zwrócona wartość

DataTable z kolumnami klucza, dt1Kolumny i dt2Kolumny. Ta tabela jest sortowana według kolumn klucza (od lewej do prawej). Gdy właściwość joinMethod ma wartość „internal”, wszystkie komórki klucza powinny być wypełnione. W przypadku innych metod łączenia, jeśli nie zostanie znaleziony żaden klucz, tabela będzie zawierać wartość null dla wszystkich niedopasowanych komórek klucza.

Przykłady

*Tables*
dt1                        dt2
bob  | 111 | red           bob   | 111 | point
bob  | 111 | green         ellyn | 222 | square
bob  | 333 | orange        jane  | 555 | circle
fred | 555 | blue          jane  | 777 | triangle
jane | 777 | yellow        fred  | 666 | dodecahedron
* Note that right table has duplicate Jane entries, but the key we will use is
* columns 0 and 1. The left table has duplicate key values, but that is
* allowed.

*Inner join* google.visualization.data.join(dt1, dt2, 'inner', [[0,0],[1,1]], [2], [2]);
bob  | 111 | red    | point
bob  | 111 | green  | point
jane | 777 | yellow | triangle
* Note that both rows from dt1 are included and matched to
* the equivalent dt2 row.


*Full join* google.visualization.data.join(dt1, dt2, 'full', [[0,0],[1,1]], [2], [2]);
bob   | 111 | red    | point
bob   | 111 | green  | point
bob   | 333 | orange | null
ellyn | 222 | null | square
fred  | 555 | blue   | null
fred  | 666 | null | dodecahedron
jane  | 555 | null | circle
jane  | 777 | yellow | triangle


*Left join*  google.visualization.data.join(dt1, dt2, 'left', [[0,0],[1,1]], [2], [2]);
bob  | 111 | red | point
bob  | 111 | green | point
bob  | 333 | orange | null
fred | 555 | blue | null
jane | 777 | yellow | triangle


*Right join*  google.visualization.data.join(dt1, dt2, 'right', [[0,0],[1,1]], [2], [2]);
bob   | 111 | red | point
bob   | 111 | green | point
ellyn | 222 | null | square
fred  | 666 | null | dodecahedron
jane  | 555 | null | circle
jane  | 777 | yellow | triangle

Formaty

GoogleWizualizacj API udostępnia narzędzia do formatowania, które umożliwiają zmianę formatu danych w wizualizacji. Te formatowania zmieniają formatowaną wartość określonej kolumny we wszystkich wierszach. Uwaga:

• Formaty formatują tylko wartości sformatowane, a nie wartości bazowe. Na przykład wyświetlana wartość to „1000.00 USD”, ale podstawowa wartość to „1000”.
• Funkcje formatowania mają wpływ tylko na 1 kolumnę. Aby zmienić format wielu kolumn, zastosuj formater do każdej kolumny, którą chcesz zmienić.
• Jeśli korzystasz też z formatowań zdefiniowanych przez użytkownika, niektóre formaty formatowania utworzone przez użytkowników Google zastąpią te wszystkie.

Rzeczywiste formatowanie zastosowane do danych pochodzi z regionu, z którego został załadowany interfejs API. Więcej informacji znajdziesz w artykule na temat ładowania wykresów z określonego regionu.

Ważne: formatowania można używać tylko z elementem DataTable; nie można ich używać z elementami DataView (obiekty DataView są tylko do odczytu).

Oto ogólne instrukcje korzystania z narzędzia do formatowania:

1. Pobierz wypełniony obiekt DataTable.
2. W każdej kolumnie, którą chcesz sformatować:
   1. Utwórz obiekt określający wszystkie opcje formatowania. To jest podstawowy obiekt JavaScript z zestawem właściwości i wartości. Zapoznaj się z dokumentacją formatowania, aby sprawdzić, które właściwości są obsługiwane. (Opcjonalnie możesz przekazać obiekt notacji dosłownej obiektu, określając dostępne opcje).
   2. Utwórz narzędzie do formatowania, przekazując obiekt opcji.
   3. Wywołaj formatter.format(table, colIndex), podając format kolumny danych DataTable i (wartość zerową) danych do zmiany formatu. Pamiętaj, że w każdej kolumnie możesz zastosować tylko 1 formatowanie. Drugie formatowanie po prostu zastąpi efekty z pierwszego.
      Ważne: wiele formatów obsługuje tagi HTML, aby wyświetlać specjalne formatowanie. Jeśli wizualizacja obsługuje opcję allowHtml, ustaw ją na wartość prawda.

Oto przykład zmiany formatu wartości daty w kolumnie daty na format długiej daty („1 stycznia 2009 r.”):

var data = new google.visualization.DataTable();
data.addColumn('string', 'Employee Name');
data.addColumn('date', 'Start Date');
data.addRows(3);
data.setCell(0, 0, 'Mike');
data.setCell(0, 1, new Date(2008, 1, 28));
data.setCell(1, 0, 'Bob');
data.setCell(1, 1, new Date(2007, 5, 1));
data.setCell(2, 0, 'Alice');
data.setCell(2, 1, new Date(2006, 7, 16));

// Create a formatter.
// This example uses object literal notation to define the options.
var formatter = new google.visualization.DateFormat({formatType: 'long'});

// Reformat our data.
formatter.format(data, 1);

// Draw our data
var table = new google.visualization.Table(document.getElementById('dateformat_div'));
table.draw(data, {showRowNumber: true});

Większość formatów obsługuje te dwie metody:

Metoda	Opis
google.visualization.formatter_name(options)	Konstruktor, gdzie formatter_name to specyficzna nazwa klasy formatowania. opcje – ogólny obiekt JavaScript, który określa opcje danego formatowania. Ten obiekt jest ogólny i ma przypisane pary właściwość-wartość z właściwościami charakterystycznymi dla tego formatowania. Zapoznaj się z dokumentacją konkretnego formatowania, aby dowiedzieć się, jakie opcje są obsługiwane. Oto 2 przykładowe sposoby wywoływania konstruktora obiektu DateFormat z użyciem dwóch właściwości: // Object literal technique var formatter = new google.visualization.DateFormat({formatType: 'long', timeZone: -5}); // Equivalent property setting technique var options = new Object(); options['formatType'] = 'long'; options['timeZone'] = -5; var formatter = new google.visualization.DateFormat(options);
format(data, colIndex)	Formatuje dane w określonej kolumnie. dane – DataTable zawierający dane do zmiany formatu. Nie możesz tutaj użyć widoku danych. colIndex – indeks oparty na zerowej kolumnie, który ma zostać sformatowany. Aby sformatować wiele kolumn, musisz wywołać tę metodę wiele razy z różnymi wartościami colIndex.

 

Interfejs Google wizualizacji API udostępnia te formaty:

Nazwa formatowania	Opis
Strzałka	Dodaje strzałkę w górę lub w dół, która wskazuje, czy wartość komórki jest powyżej, czy poniżej określonej wartości.
BarFormat	Dodaje kolorowy pasek, w którym kierunek i kolor wskazują, czy wartość komórki jest wyższa od, czy poniżej określonej wartości.
ColorFormat	Koloruje komórkę w zależności od tego, czy wartości mieszczą się w określonym zakresie.
DateFormat,	Formatuje datę lub datę, na kilka sposobów, np. „1 stycznia 2009”, „1/1/09” lub „1 stycznia 2009”.
Format liczb	Formatuje różne aspekty wartości liczbowych.
PatternFormat	Łączy wartości z tego samego wiersza w wybranym wierszu wraz z dowolnym tekstem.

Format strzałki

Dodaje strzałkę w górę lub w dół do komórki liczbowej, w zależności od tego, czy wartość jest wyższa od określonej wartości podstawowej, czy poniżej. Jeśli równa się wartości podstawowej, strzałka nie jest wyświetlana.

Opcje

ArrowFormat obsługuje te opcje przekazywane do konstruktora:

Option	Opis
base	Liczba określająca wartość podstawową, która służy do porównywania wartości komórki. Jeśli komórka jest wyższa, komórka będzie miała zieloną strzałkę w górę. Jeśli ta wartość będzie niższa, strzałka w dół będzie zawierać czerwoną strzałkę w dół.

Przykładowy kod

var data = new google.visualization.DataTable();
data.addColumn('string', 'Department');
data.addColumn('number', 'Revenues Change');
data.addRows([
  ['Shoes', {v:12, f:'12.0%'}],
  ['Sports', {v:-7.3, f:'-7.3%'}],
  ['Toys', {v:0, f:'0%'}],
  ['Electronics', {v:-2.1, f:'-2.1%'}],
  ['Food', {v:22, f:'22.0%'}]
]);

var table = new google.visualization.Table(document.getElementById('arrowformat_div'));

var formatter = new google.visualization.ArrowFormat();
formatter.format(data, 1); // Apply formatter to second column

table.draw(data, {allowHtml: true, showRowNumber: true});

BarFormat

Dodaje kolorowy pasek do komórki numerycznej, który wskazuje, czy wartość komórki jest wyższa niż, czy mniejsza od określonej wartości podstawowej.

Opcje

BarFormat obsługuje te opcje przekazywane do konstruktora:

Option	Przykład Opis
base	Liczba stanowiąca podstawę do porównania wartości w komórce. Jeśli wartość komórki jest wyższa, zostanie ona narysowana po prawej stronie podstawy. Jeśli będzie niższa, zostanie narysowana po lewej stronie. Wartość domyślna to 0.
colorNegative	Ciąg wskazujący sekcję wartości ujemnych. Możliwe wartości to „red”, „green” i „blue”. Wartość domyślna to „red”.
colorPositive	Ciąg wskazujący kolor sekcji dodatniej słupków danych. Możliwe wartości to „red”, „green” i „blue”. Domyślny kolor to „niebieski”.
drawZeroLine	Wartość logiczna wskazująca, czy należy narysować 1 ciemną linię bazową, gdy dostępne są wartości ujemne. Ciemna linia poprawia obraz przez skanowanie słupków. Wartość domyślna to „false”.
max	Maksymalna wartość liczby dla zakresu słupkowego. Wartość domyślna to najwyższa wartość w tabeli.
min	Minimalna wartość liczbowa dla zakresu słupkowego. Wartość domyślna to najniższa wartość w tabeli.
showValue	Jeśli ma wartość true (prawda), wyświetla wartości i paski, a jeśli false (fałsz), wyświetla tylko słupki. Wartość domyślna to true (prawda).
width	Grubość każdego słupka w pikselach. Wartość domyślna to 100.

Przykładowy kod

var data = new google.visualization.DataTable();
data.addColumn('string', 'Department');
data.addColumn('number', 'Revenues');
data.addRows([
  ['Shoes', 10700],
  ['Sports', -15400],
  ['Toys', 12500],
  ['Electronics', -2100],
  ['Food', 22600],
  ['Art', 1100]
]);

var table = new google.visualization.Table(document.getElementById('barformat_div'));

var formatter = new google.visualization.BarFormat({width: 120});
formatter.format(data, 1); // Apply formatter to second column

table.draw(data, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});

Format kolorów

Powoduje przypisanie kolorów do pierwszego planu lub tła komórki liczbowej (w zależności od wartości komórki). Ten format jest nietypowy, ponieważ nie przyjmuje opcji z konstruktora. Możesz zamiast tego wywoływać addRange() lub addGradientRange() tyle razy, ile chcesz, aby dodać zakresy kolorów przed wywołaniem format(). Kolory mogą mieć dowolny dozwolony format HTML, np. „czarny”, „#000000” lub „#000”.

Metody

ColorFormat obsługuje te metody:

Metoda	Opis
google.visualization.ColorFormat()	Konstruktor. Nie przyjmuje argumentów.
addRange(from, to, color, bgcolor)	Określa kolor pierwszego planu i/lub koloru tła komórki w zależności od wartości komórki. W każdej komórce z wartością w zakresie od – do zostaną przypisane wartości color i bgcolor. Warto pamiętać, że ten zakres nie obejmuje włącznie, ponieważ utworzenie zakresu od 1 do 1000 i kolejnego od 1000 do 2000 nie spowoduje pokrycia wartości 1000. from – [ciąg znaków, liczba, data, data lub godzina] dolna granica zakresu (włącznie); Jeśli wartość null będzie równa -∞. Granice ciągu znaków będą porównywane alfabetycznie z wartościami ciągu. do – [ciąg znaków, liczba, data, data lub godzina] wysoka granica (bez zakresu) zakresu lub wartość null. Jeśli wartość null będzie pasować do znaku +∞. Granice ciągu znaków są porównywane alfabetycznie z wartościami będącymi ciągami znaków. color – kolor, który ma być stosowany do tekstu w komórkach pasujących. Wartościami mogą być wartości „#RRGGBB” lub zdefiniowane stałe wartości kolorów (np. „#FF0000” lub „czerwony”). bgcolor – kolor, który ma być stosowany do tła pasujących komórek. Wartościami mogą być wartości „#RRGGBB” lub zdefiniowane stałe wartości kolorów (np. „#FF0000” lub „czerwony”).
addGradientRange(from, to, color, fromBgColor, toBgColor)	Przypisuje kolor tła z zakresu zgodnie z wartością komórki. Kolor jest przeskalowany, aby dopasować wartość komórki do zakresu od koloru z dolnej do górnej krawędzi. Pamiętaj, że ta metoda nie może porównywać wartości ciągu, tak jak robi to addRange(). Wskazówka: zakresy kolorów często są trudne do precyzyjnego zmierzenia.Najprostszym i najłatwiejszym sposobem odczytu jest zakres od pełnego nasycenia koloru do białego (np. #FF0000—FFFFFF). Od – [Liczba, Data,Data lub godzina] Dolna granica zakresu (włącznie) lub wartość null. Jeśli wartość to null, dopasuje ją do -∞. do – [Liczba, Data,Data lub godzina] Górna granica zakresu (bez zakresu) lub null. Jeśli wartość wynosi 0, będzie pasować do +∞. color – kolor, który ma być stosowany do tekstu w komórkach pasujących. Kolor jest taki sam we wszystkich komórkach, niezależnie od wartości. fromBgColor – kolor tła komórek z wartościami znajdującymi się na końcu gradientu. Wartościami mogą być wartości „#RRGGBB” lub zdefiniowane stałe wartości kolorów (np. „#FF0000” lub „czerwony”). toBgColor – kolor tła komórek z wartościami znajdującymi się na górnym końcu gradientu; Wartościami mogą być wartości „#RRGGBB” lub zdefiniowane stałe wartości kolorów (np. „#FF0000” lub „czerwony”).
format(dataTable, columnIndex)	Standardowa metoda format(), aby zastosować formatowanie do określonej kolumny.

Przykładowy kod

var data = new google.visualization.DataTable();
data.addColumn('string', 'Department');
data.addColumn('number', 'Revenues');
data.addRows([
  ['Shoes', 10700],
  ['Sports', -15400],
  ['Toys', 12500],
  ['Electronics', -2100],
  ['Food', 22600],
  ['Art', 1100]
]);

var table = new google.visualization.Table(document.getElementById('colorformat_div'));

var formatter = new google.visualization.ColorFormat();
formatter.addRange(-20000, 0, 'white', 'orange');
formatter.addRange(20000, null, 'red', '#33ff33');
formatter.format(data, 1); // Apply formatter to second column

table.draw(data, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});

Format daty

Formatuje wartość Date kodu JavaScript na różne sposoby, np. „1 stycznia 2016”, „1/1/16” lub „1 stycznia 2016 roku”.

Opcje

DateFormat obsługuje te opcje przekazywane do konstruktora:

Option	Opis
formatType	Opcja szybkiego formatowania daty. Obsługiwane są te wartości ciągów, formatując datę 28 lutego 2016 roku: „short” – krótki format, np. „28.02.2016” „medium” – średni format, np. „28 lutego 2016 r.” „long” – długi format, np. „28 lutego 2016 r.” Nie możesz podać jednocześnie właściwości formatType i pattern.
pattern	Niestandardowy wzór formatu, który zostanie zastosowany do wartości, podobnie jak format daty i godziny ICU. Na przykład: var formatter3 = new google.visualization.DateFormat({pattern: "EEE, MMM d, ''yy"}); Nie możesz podać jednocześnie właściwości formatType i pattern. Więcej informacji o wzorcach znajdziesz w następnej sekcji.
timeZone	Strefa czasowa, w której ma być wyświetlana wartość daty. To wartość liczbowa wskazująca czas GMT + tę liczbę stref czasowych (może być ujemna). Obiekt daty jest tworzony domyślnie z użyciem strefy czasowej komputera, na którym został utworzony. Ta opcja służy do wyświetlania tej wartości w innej strefie czasowej. Jeśli na przykład na komputerze w Greenwich w Anglii został utworzony obiekt Data o godzinie 17:00 i określono strefę czasową na poziomie -5 (options['timeZone'] = -5 (czas wschodnioamerykański) w Stanach Zjednoczonych), wyświetlana będzie wartość 12:00.

Metody

DateFormat obsługuje te metody:

Metoda	Opis
google.visualization.DateFormat(options)	Konstruktor. Więcej informacji znajdziesz w sekcji opcji powyżej.
format(dataTable, columnIndex)	Standardowa metoda format(), która służy do formatowania w określonej kolumnie.
formatValue(value)	Zwraca sformatowaną wartość określonej wartości. Ta metoda nie wymaga DataTable.

Przykładowy kod

function drawDateFormatTable() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Employee Name');
  data.addColumn('date', 'Start Date (Long)');
  data.addColumn('date', 'Start Date (Medium)');
  data.addColumn('date', 'Start Date (Short)');
  data.addRows([
    ['Mike', new Date(2008, 1, 28, 0, 31, 26),
             new Date(2008, 1, 28, 0, 31, 26),
             new Date(2008, 1, 28, 0, 31, 26)],
    ['Bob', new Date(2007, 5, 1, 0),
            new Date(2007, 5, 1, 0),
            new Date(2007, 5, 1, 0)],
    ['Alice', new Date(2006, 7, 16),
              new Date(2006, 7, 16),
              new Date(2006, 7, 16)]
  ]);

  // Create three formatters in three styles.
  var formatter_long = new google.visualization.DateFormat({formatType: 'long'});
  var formatter_medium = new google.visualization.DateFormat({formatType: 'medium'});
  var formatter_short = new google.visualization.DateFormat({formatType: 'short'});

  // Reformat our data.
  formatter_long.format(data, 1);
  formatter_medium.format(data,2);
  formatter_short.format(data, 3);

  // Draw our data
  var table = new google.visualization.Table(document.getElementById('dateformat_div'));
  table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
}

Więcej informacji o wzorcach dat

Oto kilka szczegółów na temat obsługiwanych wzorców:

Wzorce są podobne do formatu daty i godziny ICU, ale nie są jeszcze obsługiwane: Aby uniknąć kolizji z wzorcami, tekst dosłowny, który ma się pojawić w danych wyjściowych, powinien być ujęty w cudzysłowy pojedyncze, z wyjątkiem pojedynczych cudzysłowów, które należy podwajać: "K 'o''clock.'".

Wzór	Opis	Przykładowe dane wyjściowe
GG	Znacznik Era.	„REKLAMA”
rrrr lub rrrr	roku.	1996
M	Miesiąc w roku. Styczeń: M daje 1 MM daje 01 Modelowanie marketing miksu to styczeń MMMM generuje styczeń	„Lipiec” „07”
d	Dzień miesiąca. Dodatkowe wartości „d” dodają zera na początku.	10
godz.	Godzina w skali 12-godzinnej. Dodatkowe „h” dodają zera na początku.	12
W	Godzina w skali 24-godzinnej. Do wartości dodatkowych Hk zostaną dodane zera na początku.	0
min	Minuta w godzinie. Dodatkowe wartości „M” dodają zera na początku.	30
s	Sekunda w minucie. Dodatkowe wartości „s” dodają zera na początku.	55
4	Ułamek sekundy. Dodatkowe wartości „S” zostaną uzupełnione po prawej stronie zerami.	978
1	Dzień tygodnia. Te dane wyjściowe dla wtorku: E – wartość T EE lub EEE produkujące wt. lub wt. EEEE produkuje wtorek	„Wt.” „Wtorek”
Aa	AM/PM	„PM”
K	Godzina w ciągu dnia (1~24). Dodatkowe wartości „k” dodają zera na początku.	24
K	Godzina w południe/01:00. Dodatkowe wartości „k” dodają zera na początku.	0
Z	Strefa czasowa. W strefie czasowej 5 zwraca wartość „UTC+5”.	„UTC+5”
Z	Strefa czasowa w formacie RFC 822. Strefa czasowa -5: Z, ZZ, ZZZ, -0500 ZZZ i inne produkty „GMT -05:00”	„-0800” „GMT -05:00”
wer.	Strefa czasowa (ogólna).	„etc/GMT-5”
'	Escape (tekst)	'Date='
.	cudzysłów pojedynczy	„tak”

Format liczb

Opisuje sposób formatowania kolumn liczbowych. Opcje formatowania obejmują określenie symbolu prefiksu (np. znaku dolara) lub interpunkcji jako znacznika tysięcy.

Opcje

NumberFormat obsługuje te opcje przekazywane do konstruktora:

Option	Opis
decimalSymbol	Znak do określenia wartości dziesiętnej. Wartość domyślna to kropka (.).
fractionDigits	Liczba określająca liczbę cyfr wyświetlanych po przecinku. Wartość domyślna to 2. Jeśli podasz więcej cyfr, niż wynosi liczba, w przypadku mniejszych wartości wyświetli się 0. Skrócone wartości zostaną zaokrąglone (5 zaokrąglonych w górę).
groupingSymbol	Znak używany do grupowania cyfr po lewej stronie dziesiętnej w zestawy po trzy cyfry. Wartością domyślną jest przecinek (,).
negativeColor	Kolor tekstu wartości negatywnych. Brak wartości domyślnej. Wartościami mogą być dowolne dopuszczalne wartości koloru HTML, takie jak „czerwony” lub „#FF0000”.
negativeParens	Wartość logiczna, gdzie „true” oznacza, że wartości ujemne powinny być ujęte w nawiasy. Wartość domyślna to true (prawda).
pattern	Ciąg tekstowy z formatem. Wszystkie pozostałe opcje oprócz negativeColor są ignorowane. Ciąg formatu jest podzbiorem zestawu wzorców ICU. {pattern:'#,###%'} zwróci na przykład wartości wyjściowe „1000%”, „750%” i „50%” dla wartości 10, 7,5 i 0,5.
prefix	Prefiks do wartości, na przykład „$”.
suffix	Sufiks ciągu zawierający wartość, na przykład „%”.

Metody

NumberFormat obsługuje te metody:

Metoda	Opis
google.visualization.NumberFormat(options)	Konstruktor. Więcej informacji znajdziesz w sekcji opcji powyżej.
format(dataTable, columnIndex)	Standardowa metoda format(), aby zastosować formatowanie do określonej kolumny.
formatValue(value)	Zwraca sformatowaną wartość określonej wartości. Ta metoda nie wymaga DataTable.

Przykładowy kod

var data = new google.visualization.DataTable();
data.addColumn('string', 'Department');
data.addColumn('number', 'Revenues');
data.addRows([
  ['Shoes', 10700],
  ['Sports', -15400],
  ['Toys', 12500],
  ['Electronics', -2100],
  ['Food', 22600],
  ['Art', 1100]
]);

var table = new google.visualization.Table(document.getElementById('numberformat_div'));

var formatter = new google.visualization.NumberFormat(
    {prefix: '$', negativeColor: 'red', negativeParens: true});
formatter.format(data, 1); // Apply formatter to second column

table.draw(data, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});

PatternFormat

Umożliwia scalenie wartości wyznaczonych kolumn w jedną kolumnę wraz z dowolnym tekstem. Jeśli np. masz kolumnę z imieniem i nazwiskiem, możesz uzupełnić 3. kolumnę {last name}, {first name}. Ten formater jest niezgodny z konwencją konstruktora i metody format(). Odpowiednie instrukcje znajdziesz w sekcji Metody poniżej.

Metody

PatternFormat obsługuje te metody:

Metoda	Opis
google.visualization.PatternFormat(pattern)	Konstruktor. Nie pobiera obiektu opcji. Zamiast tego pobiera parametr pattern w postaci ciągu znaków. Jest to ciąg znaków opisujący, jakie wartości kolumn należy umieścić w kolumnie docelowej wraz z dowolnym tekstem. Umieść obiekty zastępcze w ciągu znaków, aby wskazać wartość z innej kolumny do umieszczenia. Obiekty zastępcze to {#}, gdzie # to indeks kolumny źródłowej. Indeks jest indeksem w tablicy srcColumnIndices uzyskanym za pomocą metody format() poniżej. Aby umieścić literał { lub }, zmień znaczenie tego ciągu: \{ lub \}. Aby dołączyć literał \, zmień znaczenie tak, jak \\. Przykładowy kod Poniższy przykład pokazuje konstruktor wzorca, który tworzy element zakotwiczenia, przy czym pierwszy i drugi element jest pobierany z metody format(): var formatter = new google.visualization.PatternFormat( '<a href="mailto:{1}">{0}</a>');
format(dataTable, srcColumnIndices, opt_dstColumnIndex)	Standardowe wywołanie formatowania z kilkoma dodatkowymi parametrami: dataTable – tabela danych, która ma działać srcColumnIndices – tablica co najmniej 1 indeksu kolumn (opartego na zero) do pobrania jako źródła z bazowej tabeli danych. Będzie on używany jako źródło danych parametru pattern w konstruktorze. Numery kolumn nie muszą być posortowane. opt_dstcolumnIndex – [opcjonalny] kolumna docelowa, w której umieszczasz dane wyjściowe manipulacji pattern. Jeśli nie określisz tego parametru, jako miejsca docelowego zostanie użyty pierwszy element w parametrze srcColumIndices. Przykłady formatowania znajdziesz w tabeli.

Oto kilka przykładów danych wejściowych i wyjściowych tabeli z 4 kolumnami.

Row before formatting (4 columns, last is blank):
John  |  Paul  |  Jones  |  [empty]

var formatter = new google.visualization.PatternFormat("{0} {1} {2}");
formatter.format(data, [0,1,2], 3);
Output:
  John  |  Paul  |  Jones  |  John Paul Jones

var formatter = new google.visualization.PatternFormat("{1}, {0}");
formatter.format(data, [0,2], 3);
Output:
  John  |  Paul  |  Jones  |  Jones, John

Przykładowy kod

Poniższy przykład pokazuje, jak połączyć dane z 2 kolumn w celu utworzenia adresu e-mail. Wykorzystuje obiekt DataView do ukrycia oryginalnych kolumn źródłowych:

var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Email');
data.addRows([
  ['John Lennon', '[e-mail]'],
  ['Paul McCartney', '[e-mail]'],
  ['George Harrison', '[e-mail]'],
  ['Ringo Starr', '[e-mail]']
]);

var table = new google.visualization.Table(document.getElementById('patternformat_div'));

var formatter = new google.visualization.PatternFormat(
    '<a href="mailto:{1}">{0}</a>');
// Apply formatter and set the formatted value of the first column.
formatter.format(data, [0, 1]);

var view = new google.visualization.DataView(data);
view.setColumns([0]); // Create a view with the first column only.

table.draw(view, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});

Narzędzie do tworzenia gadżetów

Klasa pomocnicza, która upraszcza pisanie Gadżetów korzystających z interfejsu Google Migration API.

Zespół

google.visualization.GadgetHelper()

Metody

Metoda	Wartość zwrotu	Opis
createQueryFromPrefs(prefs)	google.visualization.Query	Strona statyczna. Utwórz nową instancję google.visualization.Query i ustaw jej właściwości zgodnie z wartościami z preferencji gadżetów. Typ parametru prefs to _IG_Prefs Ustawienie _table_query_url służy do ustawiania adresu URL źródła danych zapytania. Ustawienie _table_query_refresh_interval służy do ustawiania interwału odświeżania zapytań (w sekundach).
validateResponse(response)	Wartość logiczna	Strona statyczna. Parametr response jest typu google.visualization.QueryResponse. Zwraca wartość true, jeśli odpowiedź zawiera dane. Zwraca wartość false, jeśli wykonanie zapytania nie powiodło się, a odpowiedź nie zawiera danych. Jeśli wystąpił błąd, ta metoda powoduje wyświetlenie komunikatu o błędzie.

Klasy zapytania

Poniższe obiekty są dostępne do wysyłania zapytań dotyczących danych do zewnętrznego źródła danych, np. Arkuszy kalkulacyjnych Google.

• Zapytanie – opakowuje wychodzące żądanie danych.
• QueryResponse – obsługuje odpowiedź ze źródła danych.

Zapytanie

Reprezentuje zapytanie wysyłane do źródła danych.

Zespół

google.visualization.Query(dataSourceUrl, opt_options)

Parametry

dataSourceUrl

[Wymagany, Ciąg] adresu URL, na który ma zostać wysłane zapytanie. Więcej informacji znajdziesz w dokumentacji dotyczącej wykresów i arkuszy kalkulacyjnych.

opcje_opcji

[Opcjonalny, obiekt] Mapa opcji dla żądania. Uwaga: jeśli korzystasz z ograniczonego źródła danych, nie używaj tego parametru. Oto obsługiwane właściwości:

• sendMethod – [opcjonalny, ciąg znaków] określa metodę, której chcesz użyć do wysłania zapytania. Wybierz jedną z tych wartości ciągu:
  • 'xhr' – wyślij zapytanie za pomocą XmlHttpRequest.
  • 'scriptInjection' – służy do wysyłania zapytania poprzez wstrzyknięcie skryptu.
  • 'makeRequest' – [dostępna tylko w przypadku gadżetów, które zostały wycofane] Wyślij zapytanie, korzystając z metody makeRequest() interfejsu API gadżetów. Jeśli ją podasz, musisz też podać makeRequestParams.
  • 'auto' – użyj metody określonej przez parametr adresu URL tqrt w adresie URL źródła danych. tqrt może mieć te wartości: „xhr”, „scriptInjection” lub „makeRequest”. Jeśli brakuje wartości tqrt lub ma ona nieprawidłową wartość, domyślną wartością jest „xhr” dla żądań z tej samej domeny i „scriptInjection” dla żądań z wielu domen.
• makeRequestParams – [Object] Mapa parametrów zapytania makeRequest(). Używana i wymagana tylko wtedy, gdy sendMethod to „makeRequest”.

Metody

Metoda	Wartość zwrotu	Opis
abort()	Brak	Zatrzymuje automatyczne wysyłanie zapytań rozpoczęte setRefreshInterval().
setRefreshInterval(seconds)	Brak	Ustawia zapytanie tak, aby automatycznie wywoływało metodę send co określony czas (liczbę sekund), licząc od pierwszego wywołania do send. seconds to liczba większa lub równa zero. Jeśli jej używasz, musisz ją wywołać przed wywołaniem metody send. Anuluj tę metodę, wywołując ją ponownie jako zero (domyślnie), lub wywołując abort().
setTimeout(seconds)	Brak	Określa liczbę sekund oczekiwania na odpowiedź źródła danych, zanim zostanie zgłoszony błąd przekroczenia limitu czasu. seconds to liczba większa niż zero. Domyślny limit czasu wynosi 30 sekund. Jeśli jest używana, powinna zostać wywołana przed wywołaniem metody send.
setQuery(string)	Brak	Ustawia ciąg zapytania. Wartość parametru string powinna być prawidłowym zapytaniem. Metoda ta powinna być wywoływana przed wywołaniem metody send. Więcej informacji o języku zapytań
send(callback)	Brak	Wysyła zapytanie do źródła danych. callback powinna być funkcją, która zostanie wywołana po odpowiedzi źródła danych. Funkcja wywołania zwrotnego otrzyma jeden parametr typu google.visualization.QueryResponse.

Zapytanie

Reprezentuje odpowiedź wykonania zapytania otrzymaną ze źródła danych. Instancja tej klasy jest przekazywana jako argument do funkcji wywołania zwrotnego ustawionego podczas wywołania Query.send.

Metody

Metoda	Wartość zwrotu	Opis
getDataTable()	Tabela danych	Zwraca tabelę danych w postaci zwróconej przez źródło danych. Zwraca wartość null, jeśli wykonanie zapytania zakończyło się niepowodzeniem i żadne dane nie zostały zwrócone.
getDetailedMessage()	Ciąg znaków	Zwraca szczegółowy komunikat o błędzie dotyczący nieudanych zapytań. Jeśli wykonanie zapytania zakończyło się powodzeniem, ta metoda zwraca pusty ciąg znaków. Zwrócona wiadomość jest przeznaczona dla deweloperów i może zawierać informacje techniczne, np. „Kolumna {salary} nie istnieje”.
getMessage()	Ciąg znaków	Zwraca krótki komunikat o błędzie w przypadku zapytań, których przetwarzanie zakończyło się niepowodzeniem. Jeśli wykonanie zapytania zakończyło się powodzeniem, ta metoda zwraca pusty ciąg znaków. Zwrócona wiadomość to krótka wiadomość przeznaczona dla użytkowników, na przykład „Nieprawidłowe zapytanie” lub „Odmowa dostępu”.
getReasons()	Tablica ciągów znaków	Zwraca tablicę z tyloma wpisami. Każdy wpis to krótki ciąg znaków zawierający błąd lub kod ostrzeżenia, który został wygenerowany podczas wykonywania zapytania. Możliwe kody: access_denied Użytkownik nie ma uprawnień dostępu do źródła danych. invalid_query W podanym zapytaniu występuje błąd składni. data_truncated Co najmniej jeden wiersz danych pasujący do wybranego zapytania nie został zwrócony ze względu na limity rozmiaru danych wyjściowych. (ostrzeżenie) timeout Zapytanie nie odpowiedziało w oczekiwanym czasie.
hasWarning()	Wartość logiczna	Zwraca wartość true, jeśli wykonanie zapytania zawiera ostrzeżenia.
isError()	Wartość logiczna	Zwraca wartość true, jeśli nie udało się wykonać zapytania i odpowiedź nie zawiera żadnej tabeli danych. Zwraca wartość <false>, jeśli zapytanie zakończyło się powodzeniem, a odpowiedź zawiera tabelę danych.

Wyświetlanie błędów

Interfejs API udostępnia kilka funkcji, które ułatwiają wyświetlanie niestandardowych komunikatów o błędach użytkownikom. Aby użyć tych funkcji, udostępnij na stronie element kontenera (zwykle <div>), w którym interfejs API pobierze sformatowany komunikat o błędzie. Może to być kontener wizualizacji lub kontener tylko na potrzeby błędów. Jeśli określisz element zawierający wizualizację, nad wizualizacją wyświetli się komunikat o błędzie. Następnie wywołaj odpowiednią funkcję, aby wyświetlić lub usunąć komunikat o błędzie.

Wszystkie funkcje to funkcje statyczne w przestrzeni nazw google.visualization.errors.

Wiele wizualizacji może wywoływać zdarzenie błędu. Więcej informacji na ten temat znajdziesz poniżej.

Przykładowy błąd niestandardowy możesz zobaczyć w Przykładowym kodzie zapytania.

Funkcja	Wartość zwrotu	Opis
addError(container, message, opt_detailedMessage, opt_options)	Wartość identyfikatora ciągu znaków, która identyfikuje obiekt błędu. Jest to unikalna wartość na stronie. Można jej użyć, by usunąć błąd lub znaleźć jego element.	Dodaje blok wyświetlania błędów do określonego elementu strony z określonym tekstem i formatowaniem. container – element DOM, do którego ma zostać wstawiony komunikat o błędzie. Jeśli nie można znaleźć kontenera, funkcja zwróci błąd JavaScript. message – ciąg znaków do wyświetlenia. opt_detailedMessage – opcjonalny szczegółowy ciąg wiadomości. Domyślnie jest to tekst wyświetlany po najechaniu kursorem myszy, ale można go zmienić w opisanej poniżej właściwości opt_option.showInToolTip. opt_option – opcjonalny obiekt z właściwościami, które określają różne opcje wyświetlania wiadomości. Obsługiwane są te opcje: showInTooltip – wartość logiczna, w której prawda pokazuje szczegółowy komunikat jako tekst podpowiedzi, a fałsz to szczegółowy komunikat w treści kontenera po krótkiej wiadomości. Wartość domyślna to true (prawda). type – ciąg tekstowy opisujący typ błędu, który określa style CSS, które mają zostać zastosowane. Obsługiwane wartości to „error” i „warning”. Wartość domyślna to „error”. style – ciąg znaków komunikatu o błędzie. Ten styl zastąpi wszystkie style zastosowane do typu ostrzeżenia (opt_option.type). Przykład: 'background-color: #33ff99; padding: 2px;' Wartość domyślna to pusty ciąg znaków. removable – wartość logiczna, gdzie „true” oznacza, że wiadomość może zostać zamknięta kliknięciem użytkownika. Wartość domyślna to fałsz.
addErrorFromQueryResponse(container, response)	Wartość identyfikatora ciągu znaków, która identyfikuje obiekt błędu, lub wartość null, jeśli odpowiedź nie wskazuje błędu. Jest to unikalna wartość na stronie. Można jej użyć, by usunąć błąd lub znaleźć jego element.	Przekaż odpowiedź zapytania i kontener komunikatu o błędzie w ten sposób: jeśli odpowiedź na zapytanie wskazuje błąd zapytania, wyświetla komunikat o błędzie w określonym elemencie strony. Jeśli odpowiedź na zapytanie ma wartość null, metoda zwróci błąd JavaScript. Aby wyświetlić błąd, przekaż do tej wiadomości moduł QueryResponse. Spowoduje to też ustawienie stylu wyświetlania odpowiedniego do typu (błąd lub ostrzeżenie, podobnie jak w przypadku atrybutu addError(opt_options.type)). container – element DOM, do którego ma zostać wstawiony komunikat o błędzie. Jeśli nie można znaleźć kontenera, funkcja zwróci błąd JavaScript. response – obiekt QueryResponse otrzymany przez moduł obsługi zapytania w odpowiedzi na zapytanie. Jeśli jest to wartość null, metoda zwróci błąd JavaScript.
removeError(id)	Wartość logiczna: true (prawda), jeśli błąd został usunięty. W przeciwnym razie ma wartość false (fałsz).	Usuwa ze strony błąd określony przez identyfikator. id – identyfikator ciągu znaków błędu utworzonego za pomocą addError() lub addErrorFromQueryResponse().
removeAll(container)	Brak	Usuwa wszystkie bloki błędów z określonego kontenera. Jeśli określony kontener nie istnieje, wyświetli się błąd. container – element DOM zawierający ciągi błędów do usunięcia. Jeśli nie można znaleźć kontenera, funkcja zwróci błąd JavaScript.
getContainer(errorId)	Ustaw obsługę elementu DOM, który zawiera określony błąd, lub wartość null, jeśli nie można jej znaleźć.	Pobiera uchwyt do elementu kontenera zawierającego błąd określony przez errorID. errorId – identyfikator ciągu błędu utworzony za pomocą addError() lub addErrorFromQueryResponse().

Zdarzenia

Większość wizualizacji generuje zdarzenia, które wskazują, że coś się stało. Jako użytkownik wykresu często słuchasz tych zdarzeń. Jeśli kodujesz własną wizualizację, możesz też wywoływać te zdarzenia samodzielnie.

Poniższe metody pozwalają deweloperom słuchać zdarzeń, usuwać istniejące moduły obsługi zdarzeń lub wyzwalać zdarzenia z poziomu wizualizacji.

• Zdarzenia google.visualization.events.addListener() i google.visualization.events.addOneTimeListener() nasłuchują zdarzeń.
• Funkcja google.visualization.events.removeListener() usuwa dotychczasowy odbiornik.
• Funkcja google.visualization.events.removeAllListeners() usuwa wszystkich słuchaczy określonego wykresu.
• google.visualization.events.trigger() uruchamia zdarzenie.

addListener()

Wywołaj tę metodę, aby zarejestrować się i otrzymywać zdarzenia uruchamiane przez wizualizację hostowaną na Twojej stronie. Musisz udokumentować, jakie argumenty zdarzenia (jeśli istnieją) będą przekazywane do funkcji obsługi.

google.visualization.events.addListener(source_visualization,
  event_name, handling_function)

source_wizualizacja

Uchwyt do instancji źródłowej wizualizacji.

event_name

Nazwa ciągu zdarzenia zdarzenia nasłuchiwania. Wizualizacja powinna udokumentować zdarzenia, które generuje.

funkcja_obsługi

Nazwa lokalnej funkcji JavaScriptu, która ma być wywoływana, gdy źródło_wizualizacja uruchamia zdarzenie event_name. Funkcja obsługi przekazuje dowolne argumenty zdarzenia jako parametry.

Zwroty

Moduł obsługi detektora dla nowego słuchacza. Za pomocą modułu obsługi możesz później usunąć ten detektor, wywołując metodę google.visualization.events.removeListener().

Przykład

Oto przykład rejestracji, aby otrzymać zdarzenie wyboru

var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, options);

google.visualization.events.addListener(table, 'select', selectHandler);

function selectHandler() {
  alert('A table row was selected');
}

AddOneTimeListener()

Jest taka sama jak w usłudze addListener(), ale jest przeznaczona do zdarzeń, których należy odsłuchać tylko raz. Kolejne wywołania zdarzenia nie będą wywoływać funkcji obsługi.

Ten przykład jest przydatny: każde losowanie powoduje zgłoszenie zdarzenia ready. Jeśli chcesz, aby kod był uruchamiany tylko jako pierwszy ready, zamiast addListener lepiej będzie używać addOneTimeListener.

removeListener(),

Wywołaj tę metodę, aby wyrejestrować dotychczasowy detektor zdarzeń.

google.visualization.events.removeListener(listener_handler)

obsługa_odbiorców

Moduł obsługi detektora do usunięcia, zwrócony przez google.visualization.events.addListener().

deleteAllListeners()

Wywołaj tę metodę, aby wyrejestrować wszystkie detektory zdarzeń w konkretnej instancji wizualizacji.

google.visualization.events.removeAllListeners(source_visualization)

source_wizualizacja

Uchwyt do instancji wizualizacji źródłowej, z której należy usunąć wszystkie detektory zdarzeń.

trigger()

Wywoływane przez implementatorów wizualizacji. Wywołaj tę metodę na podstawie wizualizacji, aby wywoływać zdarzenie o dowolnej nazwie i zestawie wartości.

google.visualization.events.trigger(source_visualization, event_name,
  event_args)

source_wizualizacja

Uchwyt do instancji źródłowej wizualizacji. Jeśli wywołujesz tę funkcję w ramach metody zdefiniowanej przez wizualizację wysyłającą, możesz po prostu przekazać słowo kluczowe this.

event_name

Nazwa ciągu znaków wywołująca zdarzenie. Możesz wybrać dowolną wartość ciągu.

argumenty_zdarzeń

[opcjonalnie] mapa par nazwa-wartość, które mają być przekazane do metody odbioru. Na przykład:{message: "Cześć!", wynik: 10, nazwa: "Fred"}. Jeśli nie są potrzebne żadne zdarzenia, możesz przekazać wartość null. Element odbierający powinien być gotowy na zaakceptowanie wartości null w przypadku tego parametru.

Przykład

Oto przykład wizualizacji, która po wywołaniu metody onclick zgłasza metodę o nazwie „select”. Nie przekazuje żadnych wartości.

MyVisualization.prototype.onclick = function(rowIndex) {
  this.highlightRow(this.selectedRow, false); // Clear previous selection
  this.highlightRow(rowIndex, true); // Highlight new selection

  // Save the selected row index in case getSelection is called.
  this.selectedRow = rowIndex;

  // Trigger a select event.
  google.visualization.events.trigger(this, 'select', null);
}

Standardowe metody i właściwości wizualizacji

Każda wizualizacja powinna ujawnić poniższy zestaw wymaganych i opcjonalnych metod oraz właściwości. Pamiętaj jednak, że nie ma konkretnego typu, który pozwala egzekwować te standardy, dlatego zapoznaj się z dokumentacją każdej wizualizacji.

• Konstruktor
• draw()
• getAction() [opcjonalny]
• getSelection() [opcjonalny]
• removeAction() [opcjonalny]
• setAction() [opcjonalny]
• setSelection() [opcjonalny]

Uwaga: te metody znajdują się w przestrzeni nazw wizualizacji, a nie w przestrzeni nazw google.visualization.

Konstruktor

Konstruktor powinien mieć nazwę klasy wizualizacji i zwracać instancję tej klasy.

visualization_class_name(dom_element)

element_dom

Wskaźnik do elementu DOM, w którym należy umieścić wizualizację.

Przykład

var org = new google.visualization.OrgChart(document.getElementById('org_div')); 

draw()

Rysuje wizualizację na stronie. W tle może to być pobranie grafiki z serwera lub utworzenie grafiki na stronie za pomocą połączonego linku do wizualizacji. Wywołuj tę metodę za każdym razem, gdy zmienią się dane lub opcje. Obiekt należy narysować wewnątrz elementu DOM przekazanego do konstruktora.

draw(data[, options])

dane

DataTable lub DataView zawierający dane służące do narysowania wykresu. Nie ma standardowej metody wyodrębniania DataTable z wykresu.

opcje

[Opcjonalnie] Mapa par nazwa-wartość z opcjami niestandardowymi. Mogą to być na przykład wysokość i szerokość, kolory tła czy napisy. Dokumentacja wizualizacji powinna zawierać dostępne opcje. Jeśli nie określisz tego parametru, powinny być dostępne opcje domyślne. Możesz przekazać składnię dosłowną obiektu JavaScript do mapy opcji: np. {x:100, y:200, title:'An Example'}

Przykład

chart.draw(myData, {width: 400, height: 240, is3D: true, title: 'My Daily Activities'});

getAction()

Jest to opcjonalnie widoczne w przypadku wizualizacji, które mają etykietki i zezwalają na działania etykietki.

Zwraca obiekt działania etykietki z wymaganym parametrem actionID.

Przykład:

// Returns the action object with the ID 'alertAction'.
chart.getAction('alertAction');

getSelection()

Jest to opcjonalnie widoczne w przypadku wizualizacji, które pozwalają na dostęp do obecnie wybranych danych na grafice.

selection_array getSelection()

Zwroty

tablica_wyborów Jeśli właściwość row ma wartość null, wybrana jest kolumna. Jeśli właściwość column ma wartość null, zaznaczenie jest wierszem. Jeśli obie mają wartość inną niż null, oznacza to konkretny element danych. Aby uzyskać wartość wybranego elementu, możesz wywołać metodę DataTable.getValue(). Pobrana tablica może zostać przekazana do setSelection().

Przykład

function myClickHandler(){
  var selection = myVis.getSelection();
  var message = '';

  for (var i = 0; i < selection.length; i++) {
    var item = selection[i];
    if (item.row != null && item.column != null) {
      message += '{row:' + item.row + ',column:' + item.column + '}';
    } else if (item.row != null) {
      message += '{row:' + item.row + '}';
    } else if (item.column != null) {
      message += '{column:' + item.column + '}';
    }
  }
  if (message == '') {
    message = 'nothing';
  }
  alert('You selected ' + message);
}

removeAction()

Jest to opcjonalnie widoczne w przypadku wizualizacji, które mają etykietki i zezwalają na działania etykietki.

Usuwa z wykresu obiekt działania etykietki z żądaniem actionID.

Przykład:

// Removes an action from chart with the ID of 'alertAction'.
chart.removeAction('alertAction');

setAction()

Jest to opcjonalnie widoczne w przypadku wizualizacji, które mają etykietki i zezwalają na działania etykietki. Działa tylko w przypadku podstawowych wykresów (barowy, kolumnowy, liniowy, warstwowy, punktowy, mieszany, bąbelkowy, kołowy, pierścień, świecowy, histogram, obszar krokowy).

Ustawia działanie etykietki do wykonania, gdy użytkownik kliknie tekst działania.

setAction(action object)

Metoda setAction przyjmuje obiekt jako parametr działania. Ten obiekt powinien określać 3 właściwości: id – identyfikator ustawianego działania, text – tekst, który powinien pojawić się w etykiecie działania, oraz action, funkcję, która powinna być uruchamiana, gdy użytkownik kliknie tekst działania.

Przed wywołaniem metody draw() wykresu należy ustawić dowolne i wszystkie działania dotyczące etykietek.

Przykład:

// Sets a tooltip action which will pop an alert box on the screen when triggered.
chart.setAction({
  id: 'alertAction',
  text: 'Trigger Alert',
  action: function() {
    alert('You have triggered an alert');
  }
});

Metoda setAction może też określać 2 dodatkowe właściwości: visible i enabled. Powinny to być funkcje zwracające wartości boolean wskazujące, czy etykietka będzie widoczna lub włączona.

Przykład:

// The visible/enabled functions can contain any logic to determine their state
// as long as they return boolean values.
chart.setAction({
  id: 'alertAction',
  text: 'Trigger Alert',
  action: function() {
    alert('You have triggered an alert');
  },
  visible: function() {
    return true;
  },
  enabled: function() {
    return true;
  }
});

setSelection()

Opcjonalnie wybiera wpis danych na wizualizacji – na przykład punkt na wykresie warstwowym lub słupek na wykresie słupkowym. Po wywołaniu tej metody wizualizacja powinna wizualnie wskazywać nowy wybór. Implementacja setSelection() nie powinna wywoływać zdarzenia „select”. Wizualizacje mogą ignorować część zaznaczenia. Na przykład w tabeli, która może pokazywać tylko wybrane wiersze, mogą być ignorowane elementy komórki lub kolumn w implementacji setSelection() lub cały wiersz.

Przy każdym wywołaniu tej metody wszystkie wybrane elementy są odznaczone, a stosowana jest nowa lista wyboru. Nie ma wyraźnego sposobu odznaczenia poszczególnych elementów. Aby usunąć wybór poszczególnych elementów, wywołaj funkcję setSelection() z elementami, które mają być pozostałe. Aby usunąć zaznaczenie wszystkich elementów, wywołaj funkcję setSelection(), setSelection(null) lub setSelection([]).

setSelection(selection_array)

tablica_wyboru

Tablica obiektów, z których każdy ma właściwość liczbową według wiersza lub kolumny. row i column to numer wiersza lub kolumny elementu na podstawie zerowej wartości, które chcesz wybrać. Aby zaznaczyć całą kolumnę, ustaw row na wartość null. Aby zaznaczyć cały wiersz, ustaw column na null. Przykład: setSelection([{row:0,column:1},{row:1, column:null}]) zaznaczy komórkę w komórce (0,1) i cały wiersz 1.

Różne metody statyczne

Ta sekcja zawiera różne przydatne metody dostępne w przestrzeni nazw google.visualization.

tablica_danych_tabeli()

Ta metoda bierze pod uwagę dwuwymiarową tablicę i przekształca ją w tabelę danych.

Typy danych kolumny są określane automatycznie na podstawie dostarczonych danych. Typy danych kolumn można też określić za pomocą notacji literału obiektu w pierwszym wierszu (wiersza nagłówka kolumny) w tablicy (np. {label: 'Start Date', type: 'date'}). Możesz też używać opcjonalnych ról danych, ale musisz je definiować w notacji literału obiektu. W dowolnej komórce możesz też użyć zapisu literału obiektu, co pozwala zdefiniować obiekty komórkowe.

Składnia

google.visualization.arrayToDataTable(twoDArray, opt_firstRowIsData)

twoDArray

Tablica dwuwymiarowa, w której każdy wiersz reprezentuje wiersz w tabeli danych. Jeśli opt_firstRowIsData ma wartość false (wartość domyślna), pierwszy wiersz jest interpretowany jako etykiety nagłówka. Typy danych w każdej kolumnie są interpretowane automatycznie na podstawie podanych danych. Jeśli komórka nie ma wartości, wpisz wartość null lub pustą.

opt_firstRowIsData

Określ, czy pierwszy wiersz definiuje wiersz nagłówka. Jeśli przyjmuje wartość „prawda”, wszystkie wiersze są uznawane za dane. Jeśli wartość to fałsz, pierwszy wiersz jest zakładany jako wiersz nagłówka, a wartości są przypisywane jako etykiety kolumn. Wartość domyślna to fałsz.

Zwroty

Nowy DataTable.

Przykłady

Ten kod pokazuje 3 sposoby tworzenia tego samego obiektu DataTable:

// Version 1: arrayToDataTable method
var data2 = google.visualization.arrayToDataTable([
  [{label: 'Country', type: 'string'},
   {label: 'Population', type: 'number'},
   {label: 'Area', type: 'number'},
   {type: 'string', role: 'annotation'}],
  ['CN', 1324, 9640821, 'Annotated'],
  ['IN', 1133, 3287263, 'Annotated'],
  ['US', 304, 9629091, 'Annotated'],
  ['ID', 232, 1904569, 'Annotated'],
  ['BR', 187, 8514877, 'Annotated']
]);

// Version 2: DataTable.addRows
var data3 = new google.visualization.DataTable();
data3.addColumn('string','Country');
data3.addColumn('number','Population');
data3.addColumn('number','Area');
data3.addRows([
  ['CN', 1324, 9640821],
  ['IN', 1133, 3287263],
  ['US', 304, 9629091],
  ['ID', 232, 1904569],
  ['BR', 187, 8514877]
]);

// Version 3: DataTable.setValue
var data = new google.visualization.DataTable();
data.addColumn('string','Country');
data.addColumn('number', 'Population');
data.addColumn('number', 'Area');
data.addRows(5);
data.setValue(0, 0, 'CN');
data.setValue(0, 1, 1324);
data.setValue(0, 2, 9640821);
data.setValue(1, 0, 'IN');
data.setValue(1, 1, 1133);
data.setValue(1, 2, 3287263);
data.setValue(2, 0, 'US');
data.setValue(2, 1, 304);
data.setValue(2, 2, 9629091);
data.setValue(3, 0, 'ID');
data.setValue(3, 1, 232);
data.setValue(3, 2, 1904569);
data.setValue(4, 0, 'BR');
data.setValue(4, 1, 187);
data.setValue(4, 2, 8514877);

rysowaniaChart()

Ta metoda tworzy wykres w jednym wywołaniu. Zaletą tej metody jest to, że wymaga nieco mniejszej ilości kodu, a wizualizacje można serializować i zapisywać jako ciągi tekstowe do ponownego wykorzystania. Ta metoda nie zwraca nic do utworzonego wykresu, więc nie możesz przypisać odbiorników metod do wychwytywania zdarzeń wykresu.

Składnia

google.visualization.drawChart(chart_JSON_or_object)

wykres_JSON_lub_obiekt

ciąg literału JSON lub obiekt JavaScript z tymi właściwościami (wielkość liter ma znaczenie):

Właściwość	Typ	Wymagany	Domyślna	Opis
wykresType	Ciąg znaków	Wymagany	brak	Nazwa klasy wizualizacji. Na wykresie Google możesz pominąć nazwę pakietu google.visualization. Jeśli odpowiednia biblioteka wizualizacji nie została jeszcze wczytana, ta metoda wczyta ją za Ciebie, jeśli jest to wizualizacja Google. Musisz samodzielnie wczytać wizualizacje innych firm. Przykłady: Table, PieChart, example.com.CrazyChart.
identyfikator kontenera	Ciąg znaków	Wymagany	brak	Identyfikator elementu DOM na Twojej stronie, na którym będzie przechowywana wizualizacja.
Opcje	obiekt	Opcjonalna	brak	Obiekt opisujący opcje wizualizacji. Możesz użyć notacji literału JavaScript lub podać obiekt do obiektu. Przykład: "options": {"width": 400, "height": 240, "is3D": true, "title": "Company Performance"}
Tabela danych	obiekt	Opcjonalna	Brak	Pole DataTable używane do wypełnienia wizualizacji. Może to być literałowy ciąg znaków JSON tabeli danych zgodnie z opisem powyżej, nick przedstawiający zapełniany obiekt google.visualization.DataTable lub dwuwymiarową tablicę np. akceptowaną przez arrayToDataTable(opt_firstRowIsData=false) . Musisz określić tę właściwość lub właściwość dataSourceUrl.
URL źródła danych	Ciąg znaków	Opcjonalna	Brak	Zapytanie o źródło danych służące do wypełniania danych na wykresie (np. arkusz kalkulacyjny Google). Musisz określić tę właściwość lub właściwość dataTable.
query	Ciąg znaków	Opcjonalna	Brak	Jeśli podajesz właściwość dataSourceUrl, możesz też podać ciąg zapytania podobny do SQL przy użyciu języka wizualizacji, aby filtrować dane lub nimi zarządzać.
częstotliwość odświeżania	Liczba	Opcjonalna	Brak	Jak często (w sekundach) wizualizacja powinna odświeżać źródło zapytania. Używaj tej właściwości tylko przy określaniu dataSourceUrl.
widok	Obiekt LUB tablica	Opcjonalna	Brak	Ustawia obiekt inicjujący DataView, który działa jak filtr bazujący na danych określony przez parametr dataTable lub dataSourceUrl. Możesz przekazać obiekt inicjujący ciąg znaków lub DataView, tak jak zwracany jest obiekt dataview.toJSON(). Przykład: "view": {"columns": [1, 2]} możesz też przekazać tablicę obiektów inicjujących DataView. W takim przypadku pierwszy DataView w tablicy jest stosowany do bazowych danych w celu utworzenia nowej tabeli danych, drugi DataView jest zastosowany do tabeli danych w wyniku zastosowania pierwszego DataView i tak dalej.

Przykłady

Tworzy wykres tabeli na podstawie źródła danych arkusza kalkulacyjnego i zawiera zapytanie SELECT A,D WHERE D > 100 ORDER BY D

<script type="text/javascript">
  google.charts.load('current');  // Note: No need to specify chart packages.
  function drawVisualization() {
    google.visualization.drawChart({
      "containerId": "visualization_div",
      "dataSourceUrl": "https://spreadsheets.google.com/a/google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1",
      "query":"SELECT A,D WHERE D > 100 ORDER BY D",
      "refreshInterval": 5,
      "chartType": "Table",
      "options": {
        "alternatingRowStyle": true,
        "showRowNumber" : true
      }
   });
 }
google.charts.setOnLoadCallback(drawVisualization);
</script>

W przykładzie poniżej utworzono taką samą tabelę, ale lokalnie utworzono DataTable:

<script type='text/javascript'>
  google.charts.load('current');
  function drawVisualization() {
    var dataTable = [
      ["Country", "Population Density"],
      ["Indonesia", 117],
      ["China", 137],
      ["Nigeria", 142],
      ["Pakistan", 198],
      ["India", 336],
      ["Japan", 339],
      ["Bangladesh", 1045]
    ];
    google.visualization.drawChart({
      "containerId": "visualization_div",
      "dataTable": dataTable,
      "refreshInterval": 5,
      "chartType": "Table",
      "options": {
        "alternatingRowStyle": true,
        "showRowNumber" : true,
      }
    });
  }
  google.charts.setOnLoadCallback(drawVisualization);
</script>

Ten przykład przekazuje wykres w postaci ciągu JSON, który został wczytany z pliku:

<script type="text/javascript">
  google.charts.load('current');
  var myStoredString = '{"containerId": "visualization_div",' +
    '"dataSourceUrl": "https://spreadsheets.google.com/a/google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1",' +
    '"query":"SELECT A,D WHERE D > 100 ORDER BY D",' +
    '"refreshInterval": 5,' +
    '"chartType": "Table",' +
    '"options": {' +
    '   "alternatingRowStyle": true,' +
    '   "showRowNumber" : true' +
    '}' +
  '}';
  function drawVisualization() {
    google.visualization.drawChart(myStoredString);
  }
  google.charts.setOnLoadCallback(drawVisualization);
</script>

drawToolbar()

To konstruktor elementu paska narzędzi, który można dołączyć do wielu wizualizacji. Pasek narzędzi umożliwia użytkownikom eksportowanie danych wizualizacji do różnych formatów lub udostępnianie wersji wizualizacji do umieszczenia w innych miejscach. Więcej informacji i przykładowy kod znajdziesz na stronie paska narzędzi.