Dokumentacja interfejsu GoogleVisual API

Ta strona zawiera listę obiektów udostępnianych przez interfejs GoogleVisual API oraz standardowe metody udostępniane przez wszystkie wizualizacje.

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

1. Klasa DataTable
2. Klasa DataView
3. Klasa ChartWrapper
4. Klasa ChartEditor
5. Metody manipulowania danymi
   1. group(),
   2. join()
6. Formatters
   1. ArrowFormat
   2. BarFormat
   3. ColorFormat
   4. DateFormat
   5. NumberFormat
   6. PatternFormat
7. Klasa MerchHelper
8. Klasy zapytania
   1. Zapytanie
   2. QueryResponse
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. arrayToDataTable()
    2. drawChart()
    3. drawToolbar()

Uwaga o tablicach

Niektóre przeglądarki nie obsługują poprawnie przecinków w tablicach JavaScriptu, więc ich nie używaj. Puste wartości w środku tablicy są dozwolone. 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 DataTable

Reprezentuje dwuwymiarową, zmienną tabelę wartości. Aby utworzyć kopię obiektu DataTable tylko do odczytu (opcjonalnie przefiltrowanej tak, aby pokazywał określone wartości, wiersze lub kolumny), utwórz obiekt DataView.

Do każdej kolumny przypisany jest typ danych i kilka opcjonalnych właściwości, w tym identyfikator, etykieta i ciąg wzorca.

Dodatkowo możesz przypisywać właściwości niestandardowe (pary nazw i wartości) do dowolnej komórki, wiersza, kolumny lub całej tabeli. 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 umożliwia przypisanie wbudowanego ciągu stylu CSS do renderowanej komórki tabeli. Wizualizacja powinna opisywać w swojej dokumentacji wszystkie obsługiwane przez nią właściwości niestandardowe.

Zobacz też: QueryResponse.getDataTable

Konstruktor

Składnia

DataTable(opt_data, opt_version)

opt_data

[Opcjonalnie] Dane używane do zainicjowania tabeli. Może to być obiekt JSON zwrócony przez wywołanie metody DataTable.toJSON() w wypełnionej tabeli lub obiekt JavaScript zawierający dane użyte do zainicjowania tabeli. Strukturę obiektu literału JavaScript opisano tutaj. Jeśli ten parametr nie zostanie podany, zostanie zwrócona nowa, pusta tabela danych.

opt_version

[Opcjonalnie] Wartość liczbowa określająca wersję używanego protokołu przewodu. Jest ona używana tylko przez implementatory źródeł danych w narzędziach Chart. Aktualna 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 zawierający typ danych, etykietę tej kolumny (którą może być wizualizacja) oraz identyfikator, którego można użyć do odwoływania się do konkretnej kolumny (zamiast korzystania z indeksów kolumn). Obiekt DataTable obsługuje również mapę dowolnych właściwości przypisanych do określonej wartości, wiersza, kolumny lub całego obiektu DataTable. W wizualizacjach można ich używać do obsługi dodatkowych funkcji, np. Wizualizacja tabeli korzysta z właściwości niestandardowych, aby umożliwić przypisywanie dowolnych nazw klas lub stylów do poszczególnych komórek.

Każda komórka tabeli zawiera wartość. Komórki mogą mieć wartość null lub wartość typu określonego w kolumnie. Komórki mogą opcjonalnie przyjąć „sformatowaną” wersję danych. Jest to ciąg znaków danych sformatowany do wyświetlania przez wizualizację. Wizualizacja może (ale nie jest) wymagana do wyświetlania w wersji sformatowanej, ale zawsze będzie używać samych danych do wszelkich przeprowadzanych sortowania lub obliczeń (np. określania, w którym miejscu na wykresie należy umieścić punkt). Przykładem może być przypisanie wartości „niska”, „średnia” i „wysoka” w postaci sformatowanej do wartości liczbowych w komórkach 1, 2 i 3.

Aby dodać wiersze danych po wywołaniu konstruktora, możesz wywołać addRow() w przypadku pojedynczego wiersza lub addRows() w przypadku wielu wierszy. Możesz także dodawać kolumny, wywołując metody addColumn(). Istnieją również metody usuwania wierszy i kolumn. Zamiast usuwać wiersze i kolumny, rozważ utworzenie elementu DataView, który będzie selektywnym widokiem elementu DataTable.

Jeśli zmienisz wartości w obiekcie DataTable po przekazaniu go do metody draw() wizualizacji, zmiany nie wpłyną od razu na wykres. Aby uwzględnić zmiany, musisz ponownie wywołać metodę draw().

Uwaga: Wykresy Google nie przeprowadzają żadnej weryfikacji tabel danych. (Gdyby tak było, renderowanie wykresów byłoby wolniejsze). Jeśli podasz liczbę w miejscu, w którym kolumna oczekuje ciągu znaków, lub na odwrót, Wykresy Google postarają się zinterpretować wartość w sensowny sposób, ale nie wskażą błędów.

Przykłady

Poniższy przykład pokazuje utworzenie wystąpienia i wypełnianie DataTable ciągiem literału z tymi samymi danymi co w przykładzie powyżej w JavaScripcie:

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

W tym przykładzie tworzy się nowy, pusty element DataTable, a następnie zapełnia go ręcznie tymi samymi danymi co 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ę DataTable w formacie JavaScriptu, czy w notacji literału obiektu?

Możesz utworzyć DataTable, wywołując konstruktor bez parametrów, a następnie dodając wartości przez wywołanie metod addColumn()/ addRows() wymienionych poniżej lub przekazując wypełniony obiekt literału JavaScript w celu jego zainicjowania. Poniżej opisujemy obie metody. Którego z nich użyjesz?

• Tworzenie i wypełnianie tabeli w języku JavaScript za pomocą wywołań właściwości addColumn(), addRow() i addRows() jest bardzo czytelnym kodem. Ta metoda jest przydatna, gdy wpisujesz kod ręcznie. Jest to wolniejsze niż przy użyciu notacji literału obiektu (opisanego poniżej), ale w mniejszych tabelach (np. 1000 komórek) prawdopodobnie nie zauważysz istotnej różnicy.
• Bezpośrednia deklaracja obiektu DataTable przy użyciu notacji dosłownej obiektu jest znacznie szybsza w przypadku dużych tabel. Prawidłowe użycie składni może być jednak trudne. Użyj jej, jeśli potrafisz wygenerować składnię literału obiektu w kodzie, co zmniejsza ryzyko wystąpienia błędów.

 

Metody

Metoda	Zwracana wartość	Opis
addColumn(type, opt_label, opt_id) LUB addColumn(description_object)	Liczby	Dodaje nową kolumnę do tabeli danych i zwraca indeks nowej kolumny. Wszystkim komórkom nowej kolumny zostanie przypisana wartość null. Ta metoda ma 2 podpisy: Pierwszy podpis ma te parametry: type – ciąg znaków z typem danych wartości w kolumnie. Możliwe typy to: 'string', 'number', 'boolean', 'date', 'datetime', i 'timeofday'. opt_label – [opcjonalny] – ciąg znaków z etykietą kolumny. Etykieta kolumny jest zwykle wyświetlana w ramach 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 pojedynczy parametr obiektu z tymi elementami: type – ciąg tekstowy opisujący typ danych kolumny. Takie same wartości jak powyżej w polu type. label – [opcjonalny, ciąg znaków] etykieta kolumny. id – [opcjonalny, ciąg znaków] identyfikator kolumny. role – [opcjonalny, ciąg znaków] rola w kolumnie. pattern – [opcjonalny, ciąg znaków] ciąg tekstowy w formacie liczbowym (lub daty), który określa sposób wyświetlania wartości kolumny. Zobacz też: getColumnId, getColumnLabel, getColumnType, insertColumn, getColumnRole
addRow(opt_cellArray)	Liczby	Dodaje nowy wiersz do tabeli danych i zwraca indeks nowego wiersza. opt_cellArray [opcjonalnie] obiekt wiersza w notacji JavaScript, który określa dane dla nowego wiersza. Jeśli ten parametr nie zostanie podany, ta metoda doda po prostu nowy, pusty wiersz na końcu tabeli. Ten parametr jest tablicą wartości komórek.Aby określić tylko wartość komórki, podaj jej wartość (np. 55 lub „hello”). Jeśli chcesz określić sformatowaną wartość lub właściwości komórki, użyj obiektu komórek (np. {v:55, f:'Pięćdziesiąt pięć'}). W tym samym wywołaniu metody możesz mieszać proste wartości i obiekty komórek. W przypadku pustej komórki użyj null lub pustego wpisu 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)	Liczby	Dodaje nowe wiersze do tabeli danych i zwraca indeks ostatnio dodanego wiersza. Możesz wywołać tę metodę, aby utworzyć nowe puste wiersze lub użyć danych służących do wypełniania wierszy, jak opisano poniżej. numOrArray – liczba lub tablica: Liczba – liczba określająca liczbę nowych, niewypełnianych wierszy do dodania. Tablica – tablica obiektów row używanych do zapełnienia zbioru nowych wierszy. Każdy wiersz jest obiektem opisanym w addRow(). W przypadku pustej komórki użyj parametru null lub 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()	DataTable	Zwraca kopię tabeli danych. Efektem jest głęboka kopia tabeli danych z wyjątkiem właściwości komórki, właściwości wierszy, właściwości tabeli oraz właściwości kolumny, które są płytkimi kopiami. Oznacza to, że właściwości, które nie są podstawowe, są kopiowane przez odwołanie, ale właściwości podstawowe są kopiowane przez wartość.
getColumnId(columnIndex)	Ciąg znaków	Zwraca identyfikator danej kolumny określonej przez indeks kolumny w tabeli bazowej. W przypadku tabel danych pobieranych za pomocą zapytań identyfikator kolumny jest ustawiany przez źródło danych i może służyć do odwoływania się do kolumn podczas korzystania z języka zapytań. Zobacz też: Query.setQuery
getColumnIndex(columnIdentifier)	Ciąg znaków, liczba	Zwraca indeks danej kolumny określonej przez indeks kolumny, identyfikator lub etykietę, jeśli występuje w tej tabeli. W przeciwnym razie -1. Gdy columnIdentifier jest ciągiem znaków, służy do znalezienia kolumny najpierw według identyfikatora, a potem etykiety. Zobacz też: getColumnId, getColumnLabel
getColumnLabel(columnIndex)	Ciąg znaków	Zwraca etykietę danej kolumny określonej przez indeks kolumny w tabeli bazowej. Etykieta kolumny jest zwykle wyświetlana w ramach wizualizacji. Na przykład etykieta kolumny może być wyświetlana jako nagłówek kolumny w tabeli lub jako etykieta legendy na wykresie kołowym. W przypadku tabel danych pobieranych przez zapytania etykieta kolumny jest ustawiana przez źródło danych lub przez klauzulę label języka zapytań. Zobacz też: setColumnLabel
getColumnPattern(columnIndex)	Ciąg znaków	Zwraca wzorzec formatowania użyty do formatowania wartości w określonej kolumnie. columnIndex powinien być liczbą większą lub równą 0 i mniejszą od liczby kolumn zwróconej przez metodę getNumberOfColumns(). W przypadku tabel danych pobieranych przez zapytania Wzorzec kolumny jest ustawiany przez źródło danych lub przez klauzulę format języka zapytania. Przykładem wzorca: '#,##0.00'. Więcej informacji o wzorcach znajdziesz w dokumentacji języka zapytań.
getColumnProperties(columnIndex)	Obiekt	Zwraca mapę wszystkich właściwości w określonej kolumnie. Zwróć uwagę, że obiekt właściwości jest zwracany przez odwołanie, więc zmiana wartości w pobranym obiekcie powoduje ich modyfikację w DataTable. columnIndex to indeks numeryczny kolumny, z której mają zostać pobrane właściwości.
getColumnProperty(columnIndex, name)	Automatycznie	Zwraca wartość właściwości nazwanej lub null, jeśli w określonej kolumnie nie ma takiej właściwości. Typ zwracania różni się w zależności od właściwości. columnIndex powinien być liczbą większą lub równą 0 i mniejszą od liczby kolumn zwróconej przez metodę getNumberOfColumns(). name to nazwa właściwości w postaci ciągu znaków. Zobacz też: setColumnProperty setColumnProperties
getColumnRange(columnIndex)	Obiekt	Zwraca minimalne i maksymalne wartości wartości w określonej kolumnie. Zwrócony obiekt ma właściwości min i max. Jeśli zakres nie ma wartości, min i max będą zawierać null. columnIndex powinien być liczbą większą lub równą 0 i mniejszą od liczby kolumn zwróconej przez metodę getNumberOfColumns().
getColumnRole(columnIndex)	Ciąg znaków	Zwraca role podanej kolumny.
getColumnType(columnIndex)	Ciąg znaków	Zwraca typ danej kolumny określony przez indeks kolumny. columnIndex powinien być liczbą większą lub równą 0 i mniejszą od liczby kolumn zwróconej przez metodę getNumberOfColumns(). Zwracany typ kolumny może mieć 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 powinien być liczbą większą lub równą 0 i mniejszą od liczby kolumn zwróconej przez metodę getNumberOfColumns(). Typ zwróconych obiektów jest taki sam jak typ zwracany przez metodę getValue.
getFilteredRows(filters)	Tablica obiektów	Zwraca indeksy wierszy dla wierszy, które pasują do wszystkich podanych filtrów. Indeksy są zwracane w kolejności rosnącej. Wyników tej metody można użyć jako danych wejściowych w funkcji DataView.setRows(), aby zmienić wyświetlany zbiór wierszy w wizualizacji. filters – tablica obiektów opisujących akceptowaną wartość komórki. Ta metoda zwraca indeks wierszy, jeśli pasuje do wszystkich danych filtrów. Każdy filtr to obiekt z liczbową właściwością column, która określa indeks kolumny w wierszu do oceny oraz jeden z tych parametrów: Właściwość value, której wartość musi odpowiadać dokładnie komórce we określonej kolumnie. Wartość musi być tego samego typu co kolumna. lub Jedna lub obie z tych właściwości, ten sam typ co filtrowana kolumna: minValue – minimalna wartość dla komórki. Wartość komórki w określonej kolumnie musi być równa tej wartości lub większa. maxValue – maksymalna wartość komórki. Wartość komórki w określonej kolumnie nie może być większa od tej wartości. Wartość null lub nieokreślona dla argumentu minValue (lub maxValue) oznacza, że dolna (lub górna) granica zakresu nie jest egzekwowana. Inna opcjonalna właściwość, test, wskazuje funkcję, którą chcesz połączyć z filtrowaniem wartości lub zakresów. Funkcja jest wywoływana z wartością komórki, indeksami wierszy i kolumn oraz tabelą danych. Jeśli wiersz ma zostać wykluczony z wyniku, wartość ta powinna zwracać 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 wszystkich wierszy, dla których czwarta kolumna (indeks kolumny 3) to dokładnie 42, a trzecia kolumna (indeks kolumny 2) znajduje się między „bar” a „foo” (włącznie).
getFormattedValue(rowIndex, columnIndex)	Ciąg znaków	Zwraca sformatowaną wartość komórki w danym indeksie wiersza i kolumny. rowIndex powinien być liczbą większą lub równą 0 i mniejszą niż liczba wierszy zwracanych przez metodę getNumberOfRows(). ColumnIndex powinien być liczbą większą lub równą 0 i mniejszą od liczby kolumn zwróconej przez metodę getNumberOfColumns(). Więcej informacji o formatowaniu wartości kolumn znajdziesz w dokumentacji języka zapytań. Zobacz też: setFormattedValue
getNumberOfColumns()	Liczby	Zwraca liczbę kolumn w tabeli.
getNumberOfRows()	Liczby	Zwraca liczbę wierszy w tabeli.
getProperties(rowIndex, columnIndex)	Obiekt	Zwraca mapę wszystkich właściwości określonej komórki. Zwróć uwagę, że obiekt właściwości jest zwracany przez odwołanie, więc zmiana wartości w pobranym obiekcie powoduje ich modyfikację w DataTable. rowIndex to indeks wiersza komórki. columnIndex to indeks kolumny komórki.
getProperty(rowIndex, columnIndex, name)	Automatycznie	Zwraca wartość właściwości nazwanej lub null, jeśli taka właściwość nie jest ustawiona dla określonej komórki. Typ zwracania różni się w zależności od właściwości. rowIndex powinien być liczbą większą lub równą 0 i mniejszą niż liczba wierszy zwracanych przez metodę getNumberOfRows(). columnIndex powinien być liczbą większą lub równą 0 i mniejszą od liczby kolumn zwróconej przez metodę getNumberOfColumns(). name to ciąg znaków z nazwą właściwości. Zobacz też: setCell setProperties setProperty
getRowProperties(rowIndex)	Obiekt	Zwraca mapę wszystkich właściwości w określonym wierszu. Zwróć uwagę, że obiekt właściwości jest zwracany przez odwołanie, więc zmiana wartości w pobranym obiekcie powoduje ich modyfikację w DataTable. rowIndex to indeks wiersza, którego właściwości mają zostać pobrane.
getRowProperty(rowIndex, name)	Automatycznie	Zwraca wartość właściwości nazwanej lub null, jeśli w określonym wierszu nie ma takiej właściwości. Typ zwracania różni się w zależności od właściwości. rowIndex powinien być liczbą większą lub równą 0 i mniejszą niż liczba wierszy zwracanych przez metodę getNumberOfRows(). name to ciąg znaków z nazwą właściwości. Zobacz też: setRowProperty setRowProperties
getSortedRows(sortColumns)	Tablica liczb	Zwraca posortowaną wersję tabeli bez zmiany kolejności danych bazowych. Aby trwale posortować dane bazowe, wywołaj sort(). Sortowanie możesz określić na wiele sposobów w zależności od typu przekazywanego do parametru sortColumns: Pojedyncza liczba określa indeks kolumny, według której ma być sortowana. Sortowanie zostanie wykonane w kolejności rosnącej. Przykład: sortColumns(3) posortuje dane według czwartej kolumny w kolejności rosnącej. Pojedynczy obiekt zawierający numer indeksu kolumny, według którego ma być sortowany, oraz opcjonalną właściwość wartości logicznej desc. Jeśli desc ma wartość Prawda, określona kolumna zostanie posortowana w kolejności malejącej. W przeciwnym razie sortowanie jest sortowane w kolejności rosnącej. Przykłady: sortColumns({column: 3}) posortuje dane z 4 kolumny w kolejności rosnącej, a sortColumns({column: 3, desc: true}) posortuje ją od 4 kolumny w kolejności malejącej. Tablica liczb kolumny indeksuje dane, według których ma być sortowana. Pierwsza liczba to kolumna podstawowa do sortowania, druga – kolumna drugorzędna itd. Oznacza to, że gdy dwie wartości w pierwszej kolumnie są równe, wartości w następnej kolumnie są porównywane i tak dalej. Przykład: sortColumns([3, 1, 6]) posortuje najpierw dane według czwartej kolumny (w kolejności rosnącej), a następnie według drugiej kolumny (w kolejności rosnącej), a następnie według 7 kolumny (w kolejności rosnącej). Tablica obiektów, każdy z numerem indeksu kolumny, według którego ma być sortowane, oraz opcjonalną właściwością wartości logicznej desc. Jeśli desc ma wartość Prawda, określona kolumna zostanie posortowana w kolejności malejącej (domyślnie jest posortowana rosnąco). Pierwszy obiekt to kolumna główna do sortowania, drugi jest kolumną dodatkową i tak dalej. Oznacza to, że gdy dwie wartości w pierwszej kolumnie są równe, porównywane są wartości w następnej kolumnie itd. Przykład: sortColumn([{column: 3}, {column: 1, desc: true}, {column: 6, desc: true}]) posortuje najpierw dane z 4 kolumny (w kolejności rosnącej), potem kolumny 2 w kolejności malejącej, a następnie kolumnę 7 w kolejności malejącej. Zwracana wartość jest tablicą liczb. Każda liczba jest indeksem wiersza DataTable. Wykonanie iteracji dla wierszy DataTable w kolejności zwróconej tablicy spowoduje, że wiersze będą porządkowane według podanego parametru sortColumns. Dane wyjściowe można wykorzystać jako dane wejściowe funkcji DataView.setRows(), by szybko zmienić wyświetlany zbiór wierszy w wizualizacji. Pamiętaj, że sortowanie musi być stabilne: oznacza to, że jeśli sortujesz według równych wartości 2 wierszy, to samo sortowanie zwróci wiersze w tej samej kolejności za każdym razem. Zobacz też: sortowanie Przykład: aby iterować 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ść właściwości nazwanej lub null, jeśli taka właściwość nie jest ustawiona w tabeli. Typ zwracania różni się w zależności od właściwości. name to ciąg znaków z nazwą właściwości. Zobacz też: setTableProperties setTableProperty
getValue(rowIndex, columnIndex)	Obiekt	Zwraca wartość komórki w danym indeksie wiersza i kolumny. rowIndex powinien być liczbą większą lub równą 0 i mniejszą niż liczba wierszy zwracanych przez metodę getNumberOfRows(). columnIndex powinien być liczbą większą lub równą 0 i mniejszą od liczby kolumn zwróconej przez metodę getNumberOfColumns(). Typ zwróconej wartości zależy od typu kolumny (patrz getColumnType): Jeśli typ kolumny to „ciąg znaków”, wartością jest ciąg znaków. Jeśli typ kolumny to „liczba”, wartością jest liczba. Jeśli typ kolumny to „boolean”, wartość jest wartością logiczną. Jeśli typ kolumny to „date” lub „datetime”, wartością jest obiekt Date. Jeśli typ kolumny to „pora dnia”, wartość jest tablicą złożoną z 4 liczb: [godzina, minuta, sekunda, milisekundy]. Jeśli wartość komórki jest pusta, funkcja zwraca null.
insertColumn(columnIndex, type [,label [,id]])	Brak	Wstawia nową kolumnę do tabeli danych o określonym indeksie. Wszystkie istniejące kolumny na określonym indeksie lub po nim zostaną cofnięte do wyższego indeksu. columnIndex to liczba z wymaganym indeksem nowej kolumny. Pole type powinno być ciągiem znaków z typem danych wartości w kolumnie. Możliwe typy to: 'string', 'number', 'boolean', 'date', 'datetime', lub 'timeofday'. Wartość label powinna być ciągiem znaków z etykietą kolumny. Etykieta kolumny jest zwykle wyświetlana w ramach 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. id powinien być ciągiem znaków z unikalnym identyfikatorem 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 o określonym indeksie wiersza. rowIndex to numer indeksu, w którym należy wstawić nowe wiersze. Zostaną dodane wiersze, zaczynając od określonego numeru indeksu. numberOrArray to liczba nowych, pustych wierszy do dodania lub tablica z co najmniej jednym wypełnionym wierszem do dodania do indeksu. Składnię dodawania tablicy obiektów wiersza znajdziesz w sekcji addRows(). Zobacz też: addRows
removeColumn(columnIndex)	Brak	Usuwa kolumnę o podanym indeksie. Wartość columnIndex powinna być liczbą z prawidłowym indeksem kolumny. Zobacz też: removeColumns
removeColumns(columnIndex, numberOfColumns)	Brak	Usuwa określoną liczbę kolumn, zaczynając od kolumny o określonym indeksie. numberOfColumns to liczba kolumn do usunięcia. Wartość columnIndex powinna być liczbą z prawidłowym indeksem kolumny. Zobacz też: removeColumn
removeRow(rowIndex)	Brak	Usuwa wiersz o określonym indeksie. Wartość rowIndex powinna być liczbą z prawidłowym indeksem wiersza. Zobacz też: removeRows
removeRows(rowIndex, numberOfRows)	Brak	Usuwa określoną liczbę wierszy, zaczynając od wiersza w określonym indeksie. numberOfRows to liczba wierszy do usunięcia. Wartość rowIndex powinna być liczbą z prawidłowym indeksem wiersza. Zobacz też: removeRow
setCell(rowIndex, columnIndex [, value [, formattedValue [, properties]]])	Brak	Ustawia wartość, sformatowaną wartość i/lub właściwości komórki. rowIndex powinien być liczbą większą lub równą 0 i mniejszą niż liczba wierszy zwracanych przez metodę getNumberOfRows(). columnIndex powinien być liczbą większą lub równą 0 i mniejszą od liczby kolumn zwróconej przez metodę getNumberOfColumns(). value [opcjonalny] to wartość przypisana do określonej komórki. Aby uniknąć zastąpienia tej wartości, ustaw ten parametr na undefined. Aby usunąć tę wartość, ustaw ją na null. Typ wartości zależy od typu kolumny (patrz getColumnType()): Jeśli typ kolumny to „ciąg znaków”, wartość powinna być ciągiem znaków. Jeśli typ kolumny to „number”, wartość powinna być liczbą. Jeśli typ kolumny to „boolean”, wartość powinna być wartością logiczną. Jeśli typ kolumny to „date” lub „datetime”, wartością powinna być obiekt Date. Jeśli typ kolumny to „pora dnia”, wartość powinna być tablicą złożoną z 4 liczb: [godzina, minuta, sekunda, milisekundy]. formattedValue [opcjonalny] to ciąg znaków z wartością sformatowaną jako ciąg znaków. Aby uniknąć zastąpienia tej wartości, ustaw ten parametr na undefined. Aby usunąć tę wartość i w razie potrzeby interfejs API zastosować domyślne formatowanie do value, ustaw wartość null. Aby jawnie ustawić pustą wartość sformatowaną, ustaw ją na pusty ciąg znaków. Sformatowana wartość jest zwykle używana w wizualizacjach do wyświetlania etykiet wartości. Sformatowana wartość może na przykład wyświetlać się jako tekst etykiety na wykresie kołowym. properties [opcjonalny] to Object (mapa nazw/wartości) z dodatkowymi właściwościami dla tej komórki. Aby uniknąć zastąpienia tej wartości, ustaw ten parametr na undefined. Aby usunąć tę wartość, ustaw go na null. Niektóre wizualizacje obsługują właściwości wierszy, kolumn i komórek, dzięki czemu zmieniają sposób ich wyświetlania lub działania. Sprawdź w dokumentacji wizualizacji, które właściwości są obsługiwane. Zobacz też: setValue(), setFormattedValue(), setProperty(), setProperties().
setColumnLabel(columnIndex, label)	Brak	Ustawia etykietę kolumny. columnIndex powinien być liczbą większą lub równą 0 i mniejszą od liczby kolumn zwróconej przez metodę getNumberOfColumns(). label to ciąg znaków z etykietą przypisaną do kolumny. Etykieta kolumny jest zwykle wyświetlana w ramach wizualizacji. Na przykład etykieta kolumny może być wyświetlana jako nagłówek kolumny w tabeli lub jako etykieta legendy 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 i komórek, dzięki czemu zmieniają sposób ich wyświetlania lub działania. Sprawdź w dokumentacji wizualizacji, które właściwości są obsługiwane. columnIndex powinien być liczbą większą lub równą 0 i mniejszą od liczby kolumn zwróconej przez metodę getNumberOfColumns(). name to ciąg znaków z nazwą właściwości. value to wartość dowolnego typu, którą można przypisać do określonej właściwości nazwanej w określonej kolumnie. 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 i komórek, dzięki czemu zmieniają sposób ich wyświetlania lub działania. Sprawdź w dokumentacji wizualizacji, które właściwości są obsługiwane. columnIndex powinien być liczbą większą lub równą 0 i mniejszą od liczby kolumn zwróconej przez metodę getNumberOfColumns(). properties to Object (mapa nazw i wartości) z dodatkowymi właściwościami w tej kolumnie. Jeśli jest określony null, wszystkie dodatkowe właściwości kolumny zostaną usunięte. Zobacz też: setColumnProperty getColumnProperty
setFormattedValue(rowIndex, columnIndex, formattedValue)	Brak	Ustawia sformatowaną wartość w komórce. rowIndex powinien być liczbą większą lub równą 0 i mniejszą niż liczba wierszy zwracanych przez metodę getNumberOfRows(). columnIndex powinien być liczbą większą lub równą 0 i mniejszą od liczby kolumn zwróconej przez metodę getNumberOfColumns(). formattedValue to ciąg znaków z wartością sformatowaną pod kątem wyświetlania. Aby usunąć tę wartość i umożliwić interfejsowi API zastosowanie domyślnego formatowania do wartości komórki w razie potrzeby, ustaw ją na formattedValue null. Aby wyraźnie ustawić pustą wartość sformatowaną, ustaw ją na pusty ciąg znaków. 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 i komórek, dzięki czemu zmieniają sposób ich wyświetlania lub działania. Sprawdź w dokumentacji wizualizacji, które właściwości są obsługiwane. rowIndex powinien być liczbą większą lub równą 0 i mniejszą niż liczba wierszy zwracanych przez metodę getNumberOfRows(). columnIndex powinien być liczbą większą lub równą 0 i mniejszą od liczby kolumn zwróconej przez metodę getNumberOfColumns(). name to ciąg znaków z nazwą właściwości. value to wartość dowolnego typu, którą można przypisać do określonej właściwości nazwanej wskazanej komórki. Zobacz też: setCell setProperties getProperty
setProperties(rowIndex, columnIndex, properties)	Brak	Ustawia właściwości wielu komórek. Niektóre wizualizacje obsługują właściwości wierszy, kolumn i komórek, dzięki czemu zmieniają sposób ich wyświetlania lub działania. Sprawdź w dokumentacji wizualizacji, które właściwości są obsługiwane. rowIndex powinien być liczbą większą lub równą 0 i mniejszą niż liczba wierszy zwracanych przez metodę getNumberOfRows(). columnIndex powinien być liczbą większą lub równą 0 i mniejszą od liczby kolumn zwróconej przez metodę getNumberOfColumns(). properties to Object (mapa nazw i wartości) z dodatkowymi właściwościami dla tej komórki. Jeśli jest określony 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 i komórek, dzięki czemu zmieniają sposób ich wyświetlania lub działania. Sprawdź w dokumentacji wizualizacji, które właściwości są obsługiwane. rowIndex powinien być liczbą większą lub równą 0 i mniejszą niż liczba wierszy zwracanych przez metodę getNumberOfRows(). name to ciąg znaków z nazwą właściwości. value to wartość dowolnego typu, którą można przypisać do określonej 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 wierszy, kolumn i komórek, co pozwala modyfikować ich wyświetlanie lub zachowanie. Sprawdź w dokumentacji wizualizacji, które właściwości są obsługiwane. rowIndex powinien być liczbą większą lub równą 0 i mniejszą niż liczba wierszy zwracanych przez metodę getNumberOfRows(). properties to Object (mapa nazw i wartości) z dodatkowymi właściwościami w tym wierszu. Jeśli jest określony atrybut null, wszystkie dodatkowe właściwości wiersza zostaną usunięte. Zobacz też: setRowProperty getRowProperty
setTableProperty(name, value)	Brak	Ustawia pojedynczą właściwość tabeli. Niektóre wizualizacje obsługują właściwości tabel, wierszy, kolumn i komórek, dzięki czemu zmieniają sposób ich wyświetlania lub działania. Sprawdź w dokumentacji wizualizacji, które właściwości są obsługiwane. name to ciąg znaków z nazwą właściwości. value to wartość dowolnego typu, którą można przypisać do określonej nazwanej właściwości tabeli. Zobacz też: setTableProperties getTableProperty
setTableProperties(properties)	Brak	Ustawia wiele właściwości tabeli. Niektóre wizualizacje obsługują właściwości tabel, wierszy, kolumn i komórek, dzięki czemu zmieniają sposób ich wyświetlania lub działania. Sprawdź w dokumentacji wizualizacji, które właściwości są obsługiwane. properties to Object (mapa nazw i wartości) z dodatkowymi właściwościami tabeli. Jeśli jest określony null, wszystkie dodatkowe właściwości tabeli zostaną usunięte. Zobacz też: setTableProperty getTableProperty
setValue(rowIndex, columnIndex, value)	Brak	Ustawia wartość komórki. Ta metoda nie tylko zastępuje istniejące wartości komórki, ale usuwa też wszystkie sformatowane wartości i właściwości komórki. rowIndex powinien być liczbą większą lub równą 0 i mniejszą niż liczba wierszy zwracanych przez metodę getNumberOfRows(). columnIndex powinien być liczbą większą lub równą 0 i mniejszą od liczby kolumn zwróconej przez metodę getNumberOfColumns(). Ta metoda nie umożliwia ustawienia sformatowanej wartości dla tej komórki. Aby to zrobić, 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 typ kolumny to „ciąg znaków”, wartość powinna być ciągiem znaków. Jeśli typ kolumny to „number”, wartość powinna być liczbą. Jeśli typ kolumny to „boolean”, wartość powinna być wartością logiczną. Jeśli typ kolumny to „date” lub „datetime”, wartością powinna być obiekt Date. Jeśli typ kolumny to „pora dnia”, wartość powinna być tablicą złożoną z 4 liczb: [godzina, minuta, sekunda, milisekundy]. Dla każdego typu kolumny wartość może być ustawiona na null. Zobacz też: setCell, setFormattedValue, setProperty i setProperties
sort(sortColumns)	Brak	Sortuje wiersze zgodnie z określonymi kolumnami sortowania. Obiekt DataTable jest modyfikowany przez tę metodę. Opis szczegółów sortowania znajdziesz na stronie getSortedRows(). Ta metoda nie zwraca posortowanych danych. Zobacz też: getSortedRows Przykład: aby posortować według trzeciej kolumny, a następnie według drugiej kolumny, użyj funkcji data.sort([{column: 2}, {column: 1}]);
toJSON()	Ciąg znaków	Zwraca reprezentację elementu DataTable w formacie JSON, który można przekazać 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 danych literału JavaScript konstruktora

DataTable możesz zainicjować, przekazując obiekt literału ciągu JavaScript do parametru data. Nadamy ten obiekt obiektem data. Możesz zaprogramować ten obiekt ręcznie zgodnie z poniższym opisem lub użyć pomocniczej biblioteki Pythona, jeśli wiesz, jak używać Pythona, i Twoja witryna może z niego korzystać. Jeśli jednak chcesz utworzyć obiekt ręcznie, w tej sekcji znajdziesz opis składni.

Najpierw pokażmy przykład prostego obiektu JavaScript opisującego tabelę z 3 wierszami i 3 kolumnami (typy typu String, Number i Date):

{
  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!'}
}

Teraz opiszmy 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 określić właściwość type jako liczbę, zapisz ją w ten sposób: type: 'number', ale sama wartość, w postaci liczbowej, będzie miała taką postać: 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 tych właściwościach (wielkość liter ma znaczenie):

• type [wymagany] – typ danych w kolumnie. Obsługuje te wartości ciągów znaków (przykłady obejmują właściwość v:, która została opisana poniżej):
  • „boolean” – wartość logiczna języka JavaScript („prawda” lub „fałsz”). Przykładowa wartość: v:'true'
  • „number” – wartość numeru JavaScript. Przykładowe wartości: v:7 , v:3.14, v:-55
  • „ciąg” – wartość ciągu znaków w JavaScripcie. Przykładowa wartość: v:'hello'
  • „date” – obiekt JavaScript Date (miesiąc liczony od zera) z skróconym czasem. Przykładowa wartość: v:new Date(2008, 0, 15)
  • „datetime” – obiekt JavaScript Date z godziną. Przykładowa wartość: v:new Date(2008, 0, 15, 14, 30, 45)
  • „pora dnia” – tablica trzech liczb z opcjonalną czwartą reprezentującą 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 kolumny. Musi być unikalna w tabeli. Używaj podstawowych znaków alfanumerycznych, aby strona hostująca nie wymagała dodatkowych znaków ucieczki, aby uzyskać dostęp do kolumny w JavaScripcie. Pamiętaj, aby nie wybrać słowa kluczowego JavaScript. Przykład: id:'col_1'
• label [Opcjonalnie] wartość ciągu tekstowego wyświetlana w niektórych wizualizacjach w tej kolumnie. Przykład: label:'Height'.
• pattern [opcjonalny] Wzorzec ciągu znaków, który był używany przez źródło danych do formatowania wartości liczbowych, daty lub czasu w kolumnach. Ta wartość służy tylko celom archiwalnym. Prawdopodobnie nie będzie trzeba odczytywać wzorca i nie musi on istnieć. Klient Google wizualizacji nie używa tej wartości (odczytuje sformatowaną wartość komórki). Jeśli obiekt DataTable pochodzi ze źródła danych w odpowiedzi na zapytanie z klauzulą format, w tej klauzuli prawdopodobnie zostanie zwrócony wzorzec określony w tej klauzuli. Zalecane standardy wzorców to ICU DeimalFormat i SimpleDateFormat .
• p [Opcjonalny] Obiekt będący mapą niestandardowych wartości zastosowanych do komórki. Wartości te mogą być dowolnego typu JavaScriptu. Jeśli wizualizacja obsługuje jakiekolwiek właściwości na poziomie komórki, zostaną one opisane. W przeciwnym razie właściwość będzie ignorowana. 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 wierszy.

Każdy obiekt wiersza ma 1 wymaganą właściwość o nazwie c, która jest tablicą komórek w tym wierszu. Zawiera 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 wizualizacja obsługuje jakiekolwiek właściwości na poziomie wiersza, zostaną one opisane. W przeciwnym razie ta właściwość będzie ignorowana.

Obiekty komórek

Każda komórka w tabeli jest opisana przez obiekt o następujących właściwościach:

• v [opcjonalnie] wartość komórki. Typ danych powinien pasować do typu danych kolumny. Jeśli komórka ma wartość null, właściwość v powinna być pusta, ale może nadal mieć właściwości f i p.
• f [opcjonalny]: wersja ciągu znaków wartości v sformatowana do wyświetlania. Zazwyczaj wartości są takie same, ale nie jest to konieczne, więc jeśli podasz Date(2008, 0, 1) dla v, podaj w tej właściwości „1 stycznia 2008 r.” lub podobny ciąg znaków. Ta wartość nie jest sprawdzana względem wartości v. Wizualizacja nie będzie używać tej wartości do obliczeń, a jedynie jako etykieta wyświetlania. Jeśli go pominiesz, wersja w postaci ciągu znaków v zostanie automatycznie wygenerowana za pomocą domyślnego narzędzia do formatowania. Wartości f można modyfikować za pomocą własnego narzędzia do formatowania, ustawiać za pomocą setFormattedValue() lub setCell() albo pobierać za pomocą getFormattedValue().
• p [Opcjonalny] Obiekt będący mapą niestandardowych wartości zastosowanych do komórki. Wartości te mogą być dowolnego typu JavaScriptu. Jeśli wizualizacja obsługuje jakiekolwiek właściwości na poziomie komórki, zostaną one opisane. Właściwości te można pobrać za pomocą metod getProperty() i getProperties(). Przykład: p:{style: 'border: 1px solid green;'}.

Komórki w tablicy wierszy powinny mieć taką samą kolejność jak ich opisy w kolumnach cols. Aby wskazać komórkę o wartości null, możesz wpisać null, pozostawić puste pole w przypadku komórki w tablicy lub pominąć elementy końcowe tablicy. Aby więc wskazać wiersz z wartością null w pierwszych 2 komórkach, możesz określić [ , , {cell_val}] lub [null, null, {cell_val}].

Oto przykładowy obiekt 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łego zbioru danych DataTable. Wartości te mogą być dowolnego typu JavaScriptu. Jeśli wizualizacja obsługuje jakiekolwiek właściwości na poziomie tabeli danych, zostaną one opisane. W przeciwnym razie ta właściwość będzie dostępna do użycia w aplikacji. Przykład: p:{className: 'myDataTable'}.

Klasa DataView

Widok tylko do odczytu bazowej tabeli DataTable. DataView umożliwia wybór tylko podzbioru kolumn lub wierszy. Pozwala też na zmianę kolejności kolumn i wierszy oraz ich duplikowanie.

Wyświetlenie to bieżący okres w źródle danych DataTable, a nie statyczny zrzut danych. Mimo to musisz zachować ostrożność podczas zmieniania struktury samej tabeli w sposób opisany tutaj:

• Dodanie lub usunięcie kolumn z tabeli bazowej nie zostanie odzwierciedlone w widoku i może spowodować nieoczekiwane zachowanie w widoku. Aby te zmiany zostały uwzględnione, musisz utworzyć nowy obiekt DataView z tabeli DataTable.
• Dodawanie lub usuwanie wierszy z tabeli bazowej jest bezpieczne, a zmiany zostaną natychmiast zastosowane do widoku danych (ale po tej zmianie musisz wywołać draw() we wszystkich wizualizacjach, aby nowy zestaw wierszy został wyrenderowany). Pamiętaj, że jeśli w widoku zostaną odfiltrowane wiersze przez wywołanie jednej z metod setRows() or hideRows(), a Ty dodasz lub usuniesz wiersze w tabeli bazowej, zachowanie jest nieoczekiwane. Musisz utworzyć nowy obiekt DataView, który będzie odzwierciedlał nową tabelę.
• Zmiana wartości komórek w istniejących komórkach jest bezpieczna, a zmiany są natychmiast przekazywane do DataView (ale po wprowadzeniu tej zmiany musisz wywołać draw() we wszystkich wizualizacjach, by nowe wartości komórek zostały wyrenderowane).

Możesz też utworzyć DataView na podstawie innego elementu DataView. Pamiętaj, że każde wspomnienie o tabeli lub widoku leżącego u podstaw odnosi się do poziomu znajdującego się bezpośrednio poniżej tego poziomu. Inaczej mówiąc, odnosi się do obiektu danych używanego do utworzenia tego zasobu DataView.

DataView obsługuje też obliczone kolumny. Są to kolumny, których wartość jest obliczana na bieżąco przy użyciu podanej przez Ciebie funkcji. Możesz na przykład uwzględnić kolumnę będącą sumą 2 poprzednich kolumn lub kolumnę, która oblicza i pokazuje kwartał kalendarzowy daty z innej kolumny. Więcej informacji znajdziesz tutaj: setColumns().

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

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

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żywany do zainicjowania widoku. Domyślnie widok zawiera wszystkie kolumny i wiersze w tabeli lub widoku danych w pierwotnej kolejności. Aby ukryć lub wyświetlić wiersze lub kolumny w tym widoku, wywołaj odpowiednie metody set...() lub hide...().

Zobacz też:

setColumns(), hideColumns(), setRows(), hideRows().

 

Konstruktor 2

Ten konstruktor tworzy nowy obiekt DataView przez przypisanie zserializowanego DataView do DataTable. Pomaga odtworzyć zasób DataView zserializowany za pomocą DataView.toJSON().

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

dane

Obiekt DataTable użyty do utworzenia obiektu DataView, który został wywołany przez DataView.toJSON(). Jeśli ta tabela różni się od pierwotnej tabeli, otrzymasz nieprzewidywalne wyniki.

viewAsJson

Ciąg znaków JSON zwrócony przez funkcję DataView.toJSON(). Ten opis opisuje, które wiersze mają być wyświetlane, a które ukryte w tabeli data.

Metody

Metoda	Zwracana wartość	Opis
getColumnId getColumnLabel getColumnPattern getColumnProperty getColumnRange getColumnType getDistinctValues getFilteredRows getFormattedValue getNumberOfColumns getNumberOfRows getProperty getProperties getRowProperty getSortedRows getTableProperty getValue	Zobacz opisy w tym języku: DataTable.	Takie same jak równoważne metody DataTable, z tą różnicą, że indeksy wierszy/kolumn odnoszą się do indeksu w widoku, a nie do bazowej tabeli lub widoku.
getTableColumnIndex(viewColumnIndex)	Liczby	Zwraca indeks w tabeli (lub widoku) danej kolumny określonej przez jej indeks w tym widoku. viewColumnIndex powinien być liczbą większą lub równą 0 i mniejszą od liczby kolumn zwróconej przez metodę getNumberOfColumns(). Zwraca wartość -1, jeśli ta kolumna jest wygenerowana. Przykład: jeśli funkcja setColumns([3, 1, 4]) została wcześniej wywołana, getTableColumnIndex(2) zwróci wartość 4.
getTableRowIndex(viewRowIndex)	Liczby	Zwraca indeks w tabeli (lub widoku) danego wiersza określonego przez jego indeks w tym widoku danych. viewRowIndex powinien być liczbą większą lub równą 0 i mniejszą niż liczba wierszy zwracana przez metodę getNumberOfRows(). Przykład: jeśli funkcja setRows([3, 1, 4]) została wcześniej wywołana, getTableRowIndex(2) zwróci wartość 4.
getViewColumnIndex(tableColumnIndex)	Liczby	Zwraca indeks w tym widoku, który jest mapowany na daną kolumnę określoną przez jej indeks w tabeli (lub widoku). Jeśli istnieje więcej niż 1 taki indeks, zwraca pierwszy (najmniejszy) indeks. Jeśli taki indeks nie istnieje (określonej kolumny nie ma w widoku), zwraca -1. tableColumnIndex powinien być liczbą większą lub równą 0 i mniejszą niż liczba kolumn zwrócona przez metodę getNumberOfColumns() bazowej tabeli/widoku. Przykład: jeśli funkcja setColumns([3, 1, 4]) została wcześniej wywołana, getViewColumnIndex(4) zwróci wartość 2.
getViewColumns()	Tablica liczb	Zwraca w kolejności kolumny w tym widoku. Oznacza to, że jeśli wywołasz funkcję setColumns z jakąś tablicą, a następnie wywołasz getViewColumns(), otrzymasz identyczną tablicę.
getViewRowIndex(tableRowIndex)	Liczby	Zwraca indeks w tym widoku, który jest mapowany na dany wiersz określony przez jego indeks w tabeli (lub widoku). Jeśli istnieje więcej niż 1 taki indeks, zwraca pierwszy (najmniejszy) indeks. Jeśli nie ma takiego indeksu (określonego wiersza nie ma w widoku), zwraca -1. tableRowIndex powinien być liczbą większą lub równą 0 i mniejszą od liczby wierszy zwracanych przez metodę getNumberOfRows() bazowej tabeli/widoku. Przykład: jeśli funkcja setRows([3, 1, 4]) została wcześniej wywołana, getViewRowIndex(4) zwróci wartość 2.
getViewRows()	Tablica liczb	Zwraca w kolejności wiersze w tym widoku. Oznacza to, że jeśli wywołasz funkcję setRows z pewną tablicą, a następnie 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 do ukrycia. Te indeksy to numery indeksów w tabeli lub widoku danych. Liczby w polu columnIndexes nie muszą być spójne (np. [3,4,1] jest prawidłowe). Podczas iteracji pozostałe kolumny zachowują swoją kolejność w indeksie. Wpisanie numeru indeksu dla ukrytej kolumny nie jest błędem, ale wpisanie indeksu, którego nie ma w bazowej tabeli lub widoku, spowoduje błąd. Aby odkryć kolumny, wywołaj setColumns(). Przykład: jeśli masz tabelę z 10 kolumnami, wywołasz setColumns([2,7,1,7,9]), a następnie hideColumns([7,9]), kolumnami w widoku będą [2,1].
hideRows(min, max)	Brak	Ukrywa w bieżącym widoku wszystkie wiersze z indeksami, które należą do zakresu od wartości minimalnej do maksymalnej (włącznie). Jest to wygodna składnia znaczników 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 odpowiedniej tabeli/widoku. Liczby w polu rowIndexes nie muszą być porządkowane (np. [3,4,1] jest prawidłowe). Pozostałe wiersze zachowują kolejność w indeksie. Wpisanie numeru indeksu dla ukrytego wiersza nie jest błędem, ale wpisanie indeksu, którego nie ma w bazowej tabeli lub widoku, spowoduje błąd. Aby odkryć wiersze, wywołaj setRows(). Przykład: jeśli masz tabelę z 10 wierszami, wywołasz setRows([2,7,1,7,9]), a następnie hideRows([7,9]), wiersze w widoku będą miały wartości [2,1].
setColumns(columnIndexes)	Brak	Określa, które kolumny są widoczne w tym widoku. Wszystkie nieokreślone kolumny zostaną ukryte. Jest to tablica indeksów kolumn w bazowej tabeli/widoku lub obliczonych kolumnach. Jeśli nie wywołasz tej metody, domyślnie wyświetlane będą wszystkie kolumny. Tablica może też zawierać duplikaty, aby wielokrotnie wyświetlać tę samą kolumnę. Kolumny będą wyświetlane w podanej kolejności. columnIndexes – tablica liczb lub obiektów (można łączyć): Liczby określają indeks kolumny danych źródłowych, która ma być uwzględniana w widoku. Dane są pobierane w niezmienionej postaci. Jeśli musisz bezpośrednio zdefiniować rolę lub dodatkowe właściwości kolumny, określ obiekt za pomocą właściwości sourceColumn. Obiekty określają obliczoną kolumnę. Obliczona kolumna na bieżąco tworzy wartość 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 dla każdego wiersza w kolumnie w celu obliczenia wartości tej komórki. 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ć 1 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 do przypisania do tej wygenerowanej kolumny. Jeśli jej nie określisz, kolumna widoku nie będzie miała etykiety. id [opcjonalny, ciąg znaków] – opcjonalny identyfikator do przypisania do wygenerowanej kolumny. sourceColumn – [opcjonalny, liczba]: kolumna źródłowa, która ma być używana jako wartość. Jeśli została określona, nie określaj właściwości calc ani type. Jest to podobne do przekazywania liczby zamiast obiektu, z tym że umożliwia określenie roli i właściwości nowej kolumny. properties [opcjonalny, obiekt] – obiekt zawierający dowolne właściwości przypisane do tej kolumny. Jeśli ich nie określisz, kolumna widoku nie będzie miała żadnych właściwości. role [opcjonalny, ciąg znaków] – rola, która ma zostać przypisana do tej kolumny. Jeśli jej nie podasz, 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 w tym widoku tak, aby obejmowały wszystkie indeksy (w tabeli lub widoku danych), które znajdują się między wartością minimalną a maksymalną (włącznie). Jest to wygodna składnia słowa setRows(rowIndexes). 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 indeksu z tabeli/widoku. rowIndexes powinien być tablicą z numerami indeksu określającą, które wiersze mają być wyświetlane w widoku. Tablica określa kolejność wyświetlania wierszy. Wiersze mogą być zduplikowane. Pamiętaj, że wyświetlą się tylko wiersze określone w polu rowIndexes. Ta metoda usuwa z widoku wszystkie pozostałe wiersze. Tablica może też zawierać duplikaty, co pozwoli zduplikować określony wiersz w tym widoku (na przykład setRows([3, 4, 3, 2]) spowoduje, że wiersz 3 pojawi się dwukrotnie w tym widoku). Tablica zapewnia więc mapowanie wierszy z bazowej tabeli/widoku na ten widok. Do generowania danych wejściowych dla tej metody możesz użyć getFilteredRows() lub getSortedRows(). Przykład: aby utworzyć widok z 3 i 0 poziomu tabeli/widoku bazowego: view.setRows([3, 0])
toDataTable()	DataTable	Zwraca obiekt DataTable wypełniony widocznymi wierszami i kolumnami funkcji DataView.
toJSON()	string,	Zwraca kolumnę DataView w postaci ciągu. Ten ciąg znaków nie zawiera rzeczywistych danych; zawiera tylko ustawienia dotyczące funkcji DataView, takie jak widoczne wiersze i kolumny. Aby odtworzyć ten widok, możesz zapisać ten ciąg i przekazać go do statycznego konstruktora DataView.fromJSON(). Nie obejmuje to wygenerowanych kolumn.

Klasa ChartWrapper

Klasa ChartWrapper służy do pakowania wykresu oraz do obsługi wczytywania, rysowania i wysyłania zapytań dotyczących źródła danych. Klasa udostępnia wygodne metody ustawiania wartości na wykresie i rysowania go. Ta klasa upraszcza odczyt ze źródła danych, ponieważ nie trzeba tworzyć modułu obsługi wywołania zwrotnego zapytania. Przy użyciu tego narzędzia możesz też zapisać wykres i ponownie go używać.

Inną zaletą korzystania z ChartWrapper jest to, że dzięki ładowaniu dynamicznemu możesz zmniejszyć liczbę wczytań biblioteki. Poza tym nie musisz jawnie ładować pakietów, ponieważ ChartWrapper będzie za Ciebie wyszukiwać i wczytywać pakiety wykresów. Szczegółowe informacje znajdziesz w przykładach poniżej.

Jednak funkcja ChartWrapper obecnie rozpowszechnia tylko podzbiór zdarzeń wywoływanych przez wykresy: select, ready (Gotowe) i error (błąd). Inne zdarzenia nie są przesyłane przez instancję ChartWrapper. Aby otrzymywać inne zdarzenia, musisz wywołać funkcję getChart() i zasubskrybować zdarzenia bezpośrednio za pomocą uchwytu wykresu, 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

[Opcjonalnie] – obiekt JSON definiujący wykres lub zserializowany ciąg znaków tego obiektu. Format tego obiektu znajdziesz w dokumentacjidrawChart(). Jeśli ich nie określisz, musisz ustawić wszystkie odpowiednie właściwości za pomocą metod set... dostępnych przez ten obiekt.

Metody

ChartWrapper udostępnia te dodatkowe metody:

Metoda	Typ zwracanej wartości	Opis
draw(opt_container_ref)	Brak	Rysuje wykres. Musisz ją wywoływać po wprowadzeniu zmian na wykresie lub w danych, aby można było je wyświetlić. opt_container_ref [opcjonalny] – odwołanie do prawidłowego elementu kontenera na stronie. Jeśli określisz wykres, zostanie on narysowany w tym miejscu. W przeciwnym razie wykres zostanie narysowany w elemencie o identyfikatorze określonym przez containerId.
toJSON()	Ciąg znaków	Zwraca wersję w postaci ciągu znaków w reprezentacji wykresu w formacie JSON.
clone()	ChartWrapper	Zwraca głęboką kopię kodu wykresu.
getDataSourceUrl()	Ciąg znaków	Jeśli dane na wykresie pochodzą 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 dane na tym wykresie pochodzą z lokalnie zdefiniowanego elementu DataTable, zwróci on odwołanie do jego właściwości DataTable. Jeśli dane na wykresie pochodzą ze źródła danych, zwraca wartość null. Wszystkie zmiany wprowadzone w zwróconym obiekcie zostaną odzwierciedlone na wykresie następnym razem, gdy wywołasz funkcję ChartWrapper.draw().
getChartType()	Ciąg znaków	Nazwa klasy opakowanego wykresu. Jeśli jest to wykres Google, nazwa nie zostanie zakwalifikowana przez google.visualization. Jeśli na przykład byłby to diagram w postaci diagramu, zwracałby on ciąg „Treemap”, a nie „google.visualization.treemap”.
getChartName()	Ciąg znaków	Zwraca nazwę wykresu przypisaną przez funkcję setChartName().
getChart()	Dokumentacja obiektów wykresu	Zwraca odwołanie do wykresu utworzonego przez ten komponent ChartWrapper, na przykład google.visualization.BarChart lub google.visualization.ColumnChart . Ta funkcja będzie zwracać wartość null do czasu wywołania draw() w obiekcie ChartWrapper i zostanie zgłoszone zdarzenie gotowe. Metody wywoływane przez zwrócony obiekt zostaną odzwierciedlone na stronie.
getContainerId()	Ciąg znaków	Identyfikator elementu kontenera DOM wykresu.
getQuery()	Ciąg znaków	Ciąg zapytania w przypadku tego wykresu (jeśli taki istnieje) i wysyła zapytanie do źródła danych.
getRefreshInterval()	Liczby	Dowolny 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 klucz – nazwa opcji do pobrania. Może to być prawidłowa nazwa, np. 'vAxis.title'. opt_default_value [opcjonalny] – jeśli określona wartość jest niezdefiniowana lub ma wartość null, zostanie ona zwrócona.
getOptions()	Obiekt	Zwraca obiekt opcji dla tego wykresu.
getView()	Obiekt LUB tablica	Zwraca obiekt inicjatora DataView w tym samym formacie co dataview.toJSON() lub tablicę takich obiektów.
setDataSourceUrl(url)	Brak	Ustawia adres URL źródła danych do użycia 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 dla wykresu. Przekaż jedną z tych wartości: null, obiekt DataTable, reprezentację tabeli DataTable w formacie JSON lub tablicę zgodną ze składnią arrayToDataTable().
setChartType(type)	Brak	Określa typ wykresu. Przekaż nazwę klasy opakowanego wykresu. Jeśli to jest wykres Google, nie kwalifikuj go za pomocą funkcji google.visualization. Na przykład w przypadku wykresu kołowego przekaż „Wykres kołowy”.
setChartName(name)	Brak	Określa dowolną nazwę dla wykresu. Nie jest on widoczny na wykresie, chyba że wykres niestandardowy został specjalnie zaprojektowany do jego używania.
setContainerId(id)	Brak	Ustawia identyfikator elementu DOM zawierającego wykres.
setQuery(query_string)	Brak	Ustawia ciąg zapytania, jeśli ten wykres wysyła zapytania do źródła danych. Określając tę wartość, musisz też ustawić adres URL źródła danych.
setRefreshInterval(interval)	Brak	Ustawia interwał odświeżania dla tego wykresu, jeśli wysyła zapytanie do źródła danych. W przypadku określania tej wartości musisz też ustawić adres URL źródła danych. Zero oznacza brak odświeżania.
setOption(key, value)	Brak	Ustawia jedną wartość opcji wykresu, gdzie klucz to nazwa opcji, a wartość to wartość. Aby cofnąć ustawienie opcji, dla wartości podaj wartość null. Pamiętaj, że klucz może być kwalifikowaną nazwą, taką jak 'vAxis.title'.
setOptions(options_obj)	Brak	Ustawia pełny obiekt opcji dla wykresu.
setView(view_spec)	Brak	Ustawia obiekt inicjatora DataView, który działa jako filtr danych bazowych. Aby można było zastosować ten widok, kod wykresu musi zawierać bazowe dane z tabeli DataTable lub źródła danych. Możesz przekazać ciąg lub obiekt inicjujący DataView, np. zwrócony przez funkcję dataview.toJSON(). Możesz też przekazać tablicę obiektów inicjujących DataView. W takim przypadku pierwszy element DataView z tablicy zostanie zastosowany do danych bazowych w celu utworzenia nowej tabeli danych, a drugi DataView zostanie zastosowany do tabeli danych wynikającej z zastosowania pierwszego elementu DataView itd.

Wydarzenia

Obiekt ChartWrapper generuje poniższe zdarzenia. Pamiętaj, że musisz wywołać funkcję ChartWrapper.draw() przed zgłoszeniem zdarzeń.

Nazwa	Opis	Właściwości
error	Uruchamiane, gdy podczas próby wyrenderowania wykresu wystąpi błąd.	identyfikator, wiadomość
ready	Wykres jest gotowy do obsługi wywołań metod zewnętrznych. Jeśli chcesz korzystać z wykresu i metod wywoływania po jego narysowaniu, skonfiguruj detektor tego zdarzenia przed wywołaniem metody draw i wywołuj je dopiero po wywołaniu zdarzenia.	Brak
select	Uruchamiane, gdy użytkownik kliknie pasek lub legendę. Po zaznaczeniu elementu wykresu zostaje wybrana odpowiednia komórka w tabeli danych. Po zaznaczeniu legendy wybierana jest odpowiadająca jej komórka w tabeli danych. Aby dowiedzieć się, co zostało wybrane, zadzwoń pod numer ChartWrapper.getChart(). getSelection(). Pamiętaj, że będzie to zgłaszane tylko wtedy, gdy typ wykresu bazowego zgłosi zdarzenie wyboru.	Brak

Przykład

Te dwa fragmenty kodu tworzą równoważny wykres liniowy. W pierwszym przykładzie do zdefiniowania wykresu użyto zapisu literału JSON, a drugi używa metod ChartWrapper do ustawiania tych wartości.

<!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 z użyciem metod wyznaczających:

<!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 ChartEditor

Klasa ChartEditor służy do otwierania okna na stronie, które umożliwia użytkownikowi dostosowanie wizualizacji na bieżąco.

Aby użyć narzędzia ChartEditor:

1. Wczytaj pakiet charteditor. W google.charts.load() wczytaj pakiet „charteditor”. Nie musisz wczytywać pakietów dla typu wykresu, który renderujesz w edytorze. Edytor wykresów wczyta wtedy dowolny pakiet.
2. Utwórz obiekt ChartWrapper definiujący wykres, który użytkownik może dostosować. Ten wykres zostanie wyświetlony w oknie. Użytkownik może skorzystać z edytora, aby przeprojektować wykres, zmienić jego typ, a nawet zmienić dane źródłowe.
3. Utwórz nową instancję ChartEditor i zarejestruj się, aby nasłuchiwać zdarzenia „ok”. To zdarzenie jest wywoływane, gdy użytkownik kliknie przycisk „OK” w oknie. Gdy otrzymasz wykres, wywołaj ChartEditor.getChartWrapper(), aby pobrać wykres zmodyfikowany przez użytkownika.
4. Zadzwoń do: ChartEditor.openDialog(), podając ChartWrapper. Otworzy się okno. Przyciski okien umożliwiają użytkownikowi zamknięcie edytora. Instancja ChartEditor jest dostępna, dopóki znajduje się w zakresie. Nie jest automatycznie zniszczona po zamknięciu okna przez użytkownika.
5. Aby zaktualizować wykres w kodzie, wywołaj setChartWrapper().

Metody

Metoda	Zwracana wartość	Opis
openDialog(chartWrapper, opt_options)	brak	Otwiera edytor wykresów jako okno dialogowe umieszczone na stronie. Funkcja zwraca natychmiast i nie czeka na zamknięcie okna. Jeśli nie utracisz zakresu instancji, możesz ponownie wywołać openDialog(), aby ponownie otworzyć okno. Konieczne jest jednak ponowne przekazanie obiektu ChartWrapper. chartWrapper – obiekt ChartWrapper określający początkowy wykres do renderowania w oknie. Wykres musi mieć wypełnione pole DataTable lub być połączony z prawidłowym źródłem danych. Ten kod jest kopiowany wewnętrznie do edytora wykresów, dlatego wszelkie późniejsze zmiany wprowadzone w uchwycie ChartWrapper nie zostaną odzwierciedlone w kopii edytora wykresów. opt_options – [opcjonalny] obiekt z dowolnymi opcjami edytora wykresów. Patrz tabela opcji poniżej.
getChartWrapper()	ChartWrapper	Zwraca ChartWrapper reprezentujący wykres, zmodyfikowany przez użytkownika.
setChartWrapper(chartWrapper)	brak	Korzystając z tej metody, możesz zaktualizować wyrenderowany wykres w edytorze. chartWrapper – obiekt ChartWrapper reprezentujący nowy wykres do wyrenderowania. Wykres musi mieć wypełnione pole DataTable lub być połączony z prawidłowym źródłem danych.
closeDialog()	brak	Zamyka okno edytora wykresów.

Opcje

Edytor wykresów obsługuje te opcje:

Nazwa	Typ	Domyślne	Opis
dataSourceInput	Uchwyt elementu lub „urlbox”	brak	Umożliwia użytkownikowi określenie źródła danych na wykresie. Ta właściwość może mieć jedną z 2 wartości: 'urlbox' – wyświetla URL źródła danych wykresu w oknie w polu tekstowym z możliwością edycji. Użytkownik może to zmienić, a wykres zostanie ponownie narysowany na podstawie nowego źródła danych. Element DOM – umożliwia udostępnienie niestandardowego elementu HTML służącego do wyboru źródła danych. Przekaż nick do elementu HTML – utworzonego w kodzie lub skopiowanego ze strony. Ten element będzie wyświetlany w oknie. Pozwala użytkownikowi wybrać źródło danych wykresu. Na przykład utwórz pole listy zawierające kilka adresów URL źródła danych lub przyjazne dla użytkownika nazwy, które użytkownicy mogą wybierać. Element musi implementować moduł obsługi wyboru, który służy do zmiany źródła danych wykresu, np. do zmiany bazowego elementu DataTable lub do zmodyfikowania pola dataSourceUrl wykresu.

Wydarzenia

Edytor wykresów generuje te zdarzenia:

Nazwa	Opis	Właściwości
ok	Uruchamiane, gdy użytkownik kliknie przycisk „OK” w oknie. Po otrzymaniu tej metody wywołaj getChartWrapper(), aby pobrać wykres skonfigurowany przez użytkownika.	brak
cancel	Uruchamiane, gdy użytkownik kliknie przycisk „Anuluj” w oknie.	brak

Przykład

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

<!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 służące do wykonywania na obiektach DataTable operacji podobnych do SQL, takich jak łączenie ich 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 wypełniony obiekt DataTable i wykonuje podobną do SQL operację GROUP BY, która zwraca tabelę z wierszami pogrupowanymi według określonych wartości kolumny. Pamiętaj, że nie spowoduje to zmiany danych wejściowych DataTable.

Zwrócona tabela zawiera po 1 wierszu na każdą kombinację wartości w określonych kolumnach kluczowych. Każdy wiersz zawiera kolumny kluczowe oraz 1 kolumnę ze zbiorczą wartością kolumny we wszystkich wierszach pasujących do kombinacji kluczy (na przykład 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łasne (na przykład StandardDeviation lub secondHighest). Instrukcje, jak zdefiniować własny agregator, znajdziesz po opisie metody.

Składnia

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

data_table

Wartość wejściowa DataTable. Nie zmieni się to po wywołaniu numeru group().

klucze

Tablica liczb lub obiektów określająca kolumny, według których należy grupować. Tabela wynikowa obejmuje wszystkie kolumny w tej tablicy oraz wszystkie kolumny w kolumnach. Jeśli jest to liczba, jest to indeks kolumny wejściowej DataTable, według której ma być grupowany. Obiekt będzie zawierał funkcję, która może modyfikować określoną kolumnę (np. dodaj 1 do wartości w tej kolumnie). Obiekt musi mieć te właściwości:

• kolumna – liczba będąca indeksem kolumny z zakresu dt, do którego ma zostać zastosowane przekształcenie.
• modyfikator – funkcja, która akceptuje jedną wartość (wartość komórki w tej kolumnie dla każdego wiersza) i zwraca zmodyfikowaną wartość. Ta funkcja służy do modyfikowania wartości kolumny, aby ułatwić grupowanie: na przykład przez wywołanie funkcji whoQuarter, 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 ta może być zadeklarowana w treści tego obiektu lub może być definiowana w innym miejscu w kodzie (musi znajdować się w zakresie wywołania). Interfejs API udostępnia prostą funkcję modyfikatora. Tutaj znajdziesz instrukcje tworzenia własnych, bardziej przydatnych funkcji. Musisz znać typ danych, który może przyjmować ta funkcja, i wywoływać go tylko w kolumnach tego typu. Musisz też znać typ zwrotu tej funkcji i zadeklarować go we właściwości type opisanej poniżej.
• typ – typ zwrócony przez modyfikator funkcji. Powinna to być nazwa typu ciągu JavaScript, np. „liczba” lub „wartość logiczna”.
• etykieta – [opcjonalny] etykieta ciągu znaków, która ma zostać przypisana do tej kolumny w zwróconym obiekcie DataTable.
• id – [opcjonalny] identyfikator ciągu znaków do przypisania tej kolumny w zwróconej wartości DataTable.

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

kolumny

[Opcjonalnie] Umożliwia określenie, które kolumny oprócz kolumn kluczowych mają zostać uwzględnione w tabeli wyjściowej. Ponieważ wszystkie wiersze w grupie wierszy są skompresowane w jeden wiersz wyjściowy, musisz określić, jaka wartość ma być wyświetlana w przypadku danej grupy wierszy. Możesz na przykład wybrać, czy wyświetlać wartość kolumny z pierwszego wiersza zestawu czy jako średnią wszystkich wierszy w tej grupie. columns to tablica obiektów o tych właściwościach:

• kolumna – liczba określająca indeks kolumny do wyświetlenia.
• agregacja – funkcja, która akceptuje tablicę wszystkich wartości tej kolumny w tej grupie wierszy i zwraca pojedynczą wartość do wyświetlenia w wierszu wyniku. Zwracana wartość musi być typu określonego we właściwości type obiektu. Poniżej znajdziesz informacje o tym, jak utworzyć własną funkcję agregacji. Musisz wiedzieć, jakie typy danych akceptuje ta metoda, i wywoływać ją tylko w kolumnach odpowiedniego typu. Interfejs API udostępnia kilka przydatnych funkcji agregacji. Listę znajdziesz w sekcji Udostępnione funkcje agregacji poniżej. Informacje o tym, jak napisać własną funkcję agregacji, znajdziesz w sekcji Tworzenie funkcji agregacji.
• typ – zwracany typ 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 ma zostać zastosowany do tej kolumny w zwróconej tabeli.

Zwracana wartość

DataTable z 1 kolumną na każdą kolumnę wymienioną w kluczach i po 1 kolumnie na każdą kolumnę wymienioną w kolumnach. Tabela jest posortowana według kluczowych wierszy, 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

Udostępnione funkcje modyfikujące

Interfejs API udostępnia poniższe funkcje modyfikujące, które można przekazać 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 podanej daty funkcja ta zwraca wartość miesiąca od zera (0, 1, 2 itd.).

Udostępnione funkcje agregujące

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

Funkcja	Typ tablicy wejściowej	Typ zwracanej wartości	Opis
google.visualization.data.avg	Liczba	Liczba	Średnia wartość tablicy przekazywanej.
google.visualization.data.count	dowolny typ	Liczba	Liczba wierszy w grupie. Zliczane są zarówno wartości null, jak i zduplikowane.
google.visualization.data.max	liczba, ciąg, data	number, string, Date, null	Maksymalna wartość w tablicy. W przypadku ciągów znaków jest to pierwszy element na liście posortowanej leksykograficznie, a w przypadku wartości daty jest to najnowsza data. Wartości null są ignorowane. Jeśli nie ma wartości maksymalnej, zwraca wartość null.
google.visualization.data.min	liczba, ciąg, data	number, string, Date, null	Minimalna wartość w tablicy. W przypadku ciągów znaków jest to ostatni element na liście posortowanej leksykograficznie, a w przypadku wartości daty jest to najwcześniejsza data. Wartości null są ignorowane. Jeśli wartość minimalna nie jest określona, 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ć proste przekształcenie wartości kluczowych, zanim funkcja group() zgrupuje wiersze. Ta funkcja pobiera wartość z jednej komórki, wykonuje na niej działanie (np. dodaje 1 do wartości) i ją zwraca. Typy danych wejściowych i zwrotnych nie muszą być tego samego typu, ale element wywołujący musi znać typy danych wejściowych i wyjś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 zbiór wartości z kolumn w grupie wierszy i zwraca pojedynczą liczbę, np. zwracającą liczbę lub średnią wartości. Oto implementacja podanej funkcji agregującej liczby, która zwraca liczbę wierszy należących do grupy:

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

Join()

Ta metoda łączy 2 tabele danych (obiekty DataTable lub DataView) w pojedynczą tabelę wyników, podobnie jak instrukcja SQL JOIN. Możesz określić co najmniej jedną parę kolumn (kolumnę klucza) między 2 tabelami, a tabela wyjściowa będzie zawierać wiersze zgodnie z wybraną metodą łączenia: tylko wiersze pasujące do obu kluczy, wszystkie wiersze z jednej tabeli lub wszystkie wiersze z obu tabel niezależnie od tego, czy klucze się zgadzają. Tabela wyników zawiera tylko kolumny kluczowe oraz wszelkie określone przez Ciebie dodatkowe kolumny. Pamiętaj, że klucz dt2 nie może mieć zduplikowanych kluczy, ale dt1 może. Termin „klucz” oznacza kombinację wszystkich wartości w kolumnie kluczowych, a nie konkretną wartość kolumny. Jeśli więc wiersz zawiera wartości w komórkach A | B | C, a kolumny 0 i 1 są kolumnami kluczowymi, klucz dla tego wiersza to AB.

Składnia

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

dt1

W polu DataTable zostanie wypełnione pole dt2.

dt2

Wypełniony DataTable, aby połączyć z dt1. Ta tabela nie może mieć wielu identycznych kluczy (gdzie klucz jest kombinacją wartości z kolumny kluczy).

joinMethod

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

• „full” – tabela wyjściowa obejmuje wszystkie wiersze z obu tabel niezależnie od tego, czy klucze są zgodne. Niedopasowane wiersze będą miały wpisy o wartości null, a dopasowane wiersze zostaną połączone.
• „wewnętrzne” – pełne złączenie zostało przefiltrowane w celu uwzględnienia tylko wierszy, w których pasują klucze.
• „left” – tabela wyjściowa obejmuje wszystkie wiersze z parametru dt1, niezależnie od tego, czy istnieją jakieś pasujące wiersze z parametru dt2.
• „right” – tabela wyjściowa zawiera wszystkie wiersze z argumentu dt2 niezależnie od tego, czy istnieją jakieś pasujące wiersze z parametru dt1.

klucze

Tablica kluczowych kolumn do porównania z obu tabel. Każda para jest tablicą z dwoma elementami, pierwsza to klucz w dt1, a druga to klucz w dt2. Ta tablica może określać kolumny według indeksu, identyfikatora lub etykiety (patrz getColumnIndex).
Kolumny muszą być tego samego typu w obu tabelach. Aby uwzględnić wiersz z tabeli, wszystkie określone klucze muszą być zgodne zgodnie z regułą określoną przez joinMethod. Kolumny kluczy są zawsze uwzględniane w tabeli wyjściowej. Tylko dt1 (tabela po lewej stronie) może zawierać zduplikowane klucze. Klucze w dt2 muszą być unikalne. Termin „klucz” oznacza tu unikalny zestaw kolumn kluczy, a nie wartości poszczególnych kolumn. Jeśli na przykład kolumny kluczowe to A i B, ta tabela będzie miała tylko unikalne wartości klucza (i może zostać użyta jako dt2):

A	B
Jona	Czerwony
Jona	Niebieski
Fred	Czerwony

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

dt1Columns

Tablica kolumn z dt1 do uwzględnienia w tabeli wyjściowej oprócz kolumn kluczy dt1. Ta tablica może określać kolumny według indeksu, identyfikatora lub etykiety (patrz getColumnIndex).

dt2Columns

Tablica kolumn z dt2 do uwzględnienia w tabeli wyjściowej oprócz kolumn kluczy dt2. Ta tablica może określać kolumny według indeksu, identyfikatora lub etykiety (patrz getColumnIndex).

Zwracana wartość

Element DataTable z kluczowymi kolumnami, dt1Columns i dt1Columns. Ta tabela jest posortowana według kolumn kluczowych od lewej do prawej. Gdy joinMethod ma wartość „inner”, wszystkie komórki kluczowe powinny być wypełnione. Jeśli w przypadku innych metod łączenia nie znaleziono żadnego klucza pasującego, wszystkie niedopasowane komórki klucza będą miały wartość null w tabeli.

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

Formatowanie

Interfejs Google Vision API udostępnia narzędzia do formatowania, których można używać do zmiany formatu danych w wizualizacji. Te elementy formatujące zmieniają sformatowaną wartość określonej kolumny we wszystkich wierszach. Uwaga:

• Elementy formatujące zmieniają tylko wartości sformatowane, a nie wartości bazowe. Wyświetlana wartość to na przykład „1000, 00 PLN”, ale wartość bazowa to „1000”.
• Elementy formatujące wpływają tylko na 1 kolumnę naraz. Aby zmienić format wielu kolumn, zastosuj narzędzie formatujące do każdej kolumny, którą chcesz zmienić.
• Jeśli korzystasz też ze zdefiniowanych przez użytkownika narzędzi do formatowania, niektóre z nich zastąpią wszystkie formaty zdefiniowane przez użytkownika.

Faktyczne formatowanie danych jest określane na podstawie języka, w którym załadowano interfejs API. Więcej informacji znajdziesz w artykule o wczytywaniu wykresów w określonym języku .

Ważne: elementów formatujących można używać tylko z DataTable. Nie można ich używać z 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 przypadku każdej kolumny, której format chcesz zmienić:
   1. Utwórz obiekt określający wszystkie opcje narzędzia do formatowania. To jest podstawowy obiekt JavaScript ze zbiorem właściwości i wartości. Zapoznaj się z dokumentacją narzędzia do formatowania, aby sprawdzić, które właściwości są obsługiwane. (Opcjonalnie możesz przekazać obiekt notacji literału obiektu, określając opcje).
   2. Utwórz narzędzie do formatowania, przekazując obiekt options.
   3. Wywołaj formatter.format(table, colIndex), przekazując do nowego formatu DataTable i numer kolumny danych (liczonych od zera). Pamiętaj, że do każdej kolumny możesz zastosować tylko jeden moduł formatowania. Zastosowanie drugiego spowoduje po prostu zastąpienie efektów pierwszej.
      Ważne: wiele narzędzi do formatowania wymaga tagów HTML do wyświetlania specjalnego formatowania. Jeśli wizualizacja obsługuje opcję allowHtml, należy ustawić wartość „true” (prawda).

Oto przykład zmiany sformatowanych wartości daty w kolumnie daty, aby użyć długiego formatu 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ść narzędzi do formatowania udostępnia 2 metody:

Metoda	Opis
google.visualization.formatter_name(options)	Konstruktor, gdzie formatter_name to konkretna nazwa klasy formatterclass. options – ogólny obiekt JavaScript, który określa opcje dla danego narzędzia do formatowania. Ten obiekt jest ogólnym obiektem z parami właściwość-wartość i właściwościami specyficznymi dla danego narzędzia do formatowania. Zapoznaj się z dokumentacją konkretnego narzędzia do formatowania, aby dowiedzieć się, które opcje są obsługiwane. Oto 2 przykładowe sposoby wywołania konstruktora obiektu DateFormat, przekazując 2 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)	Ponownie formatuje dane w określonej kolumnie. dane – obiekt DataTable zawierający dane do zmiany formatu. Nie możesz użyć tu obiektu DataView. colIndex – liczony od zera indeks kolumny do sformatowania. Aby sformatować wiele kolumn, musisz wielokrotnie wywołać tę metodę z różnymi wartościami colIndex.

 

Interfejs GoogleVisual API udostępnia następujące narzędzia do formatowania:

Nazwa narzędzia do formatowania	Opis
ArrowFormat	Dodaje strzałkę w górę lub w dół wskazującą, czy wartość komórki jest powyżej czy poniżej określonej wartości.
BarFormat	Dodaje kolorowy pasek, którego kierunek i kolor wskazują, czy wartość komórki znajduje się powyżej czy poniżej określonej wartości.
ColorFormat	Koloruje komórkę zgodnie z tym, czy wartości mieszczą się w określonym zakresie.
DateFormat	Formatuje wartość daty lub daty i godziny na kilka różnych sposobów, w tym „1 stycznia 2009”, „01/01/09” i „1 sty 2009”.
NumberFormat	Formatuje różne aspekty wartości liczbowych.
PatternFormat	Łączy wartości komórek z tego samego wiersza w określoną komórkę razem z dowolnym tekstem.

ArrowFormat

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

Opcje

ArrowFormat obsługuje następujące opcje przekazywane do konstruktora:

Option	Opis
base	Liczba określająca wartość bazową służącą do porównywania z wartością komórki. Jeśli wartość komórki jest większa, komórka będzie zawierać zieloną strzałkę w górę. Jeśli wartość komórki jest mniejsza, pojawi się czerwona strzałka w dół. Jeśli ta sama strzałka jest taka sama, nie będzie żadnej.

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 do komórki liczbowej kolorowy pasek wskazujący, czy wartość komórki jest powyżej czy poniżej określonej wartości podstawowej.

Opcje

BarFormat obsługuje następujące opcje przekazywane do konstruktora:

Option	Przykład Opis
base	Liczba, która stanowi wartość podstawową do porównania wartości komórki. Jeśli wartość komórki jest większa, będzie ona narysowana z prawej strony podstawy, a jeśli mniejsza, będzie przeciągnięta w lewo. Wartość domyślna to 0.
colorNegative	Ciąg wskazujący sekcję słupków z wartością ujemną. Możliwe wartości to „czerwony”, „zielony” i „niebieski”, a wartość domyślna to „czerwony”.
colorPositive	Ciąg wskazujący kolor sekcji słupków z wartością dodatnią. Możliwe wartości to „czerwony”, „zielony” i „niebieski”. Domyślnym ustawieniem jest „niebieski”.
drawZeroLine	Wartość logiczna wskazująca, czy należy narysować ciemną linię bazową o szerokości 1 piksela, gdy występują wartości ujemne. Ciemna linia poprawia wygląd słupków. Wartość domyślna to „false”.
max	Maksymalna wartość liczbowa w zakresie słupka. Wartość domyślna to najwyższa wartość w tabeli.
min	Minimalna wartość liczbowa w zakresie słupka. Wartość domyślna to najniższa wartość w tabeli.
showValue	Jeśli ma wartość true (prawda), pokazuje wartości i słupki. Jeśli ma wartość Fałsz, pokazuje 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%'});

ColorFormat

Przypisuje kolory do pierwszego planu lub tła komórki liczbowej w zależności od wartości komórki. Jest to nietypowy format, ponieważ nie uwzględnia swoich opcji w konstruktorze. Zamiast tego wywołaj addRange() lub addGradientRange() tyle razy, ile chcesz, aby dodać zakresy kolorów, zanim wywołasz format(). Kolory można określić w dowolnym dopuszczalnym formacie HTML, na przykład „czarny”, „#000000” lub „#000”.

Metody

ColorFormat obsługuje te metody:

Metoda	Opis
google.visualization.ColorFormat()	Konstruktor. Nie przyjmuje żadnych argumentów.
addRange(from, to, color, bgcolor)	Określa kolor pierwszego planu lub kolor tła komórki w zależności od wartości komórki. Do każdej komórki z wartością w podanym zakresie from–to zostaną przypisane wartości color i bgcolor. Warto pamiętać, że zakres nie obejmuje zakresu, ponieważ utworzenie zakresu od 1 do 1000 oraz sekundy od 1000 do 2000 nie obejmie wartości 1000. from – [String, Number, Date, DateTime, or TimeOfDay] dolna granica zakresu (włącznie) lub wartość null. Jeśli wartość to null, będzie ona równa -∞. Granice ciągu znaków są porównywane alfabetycznie z wartościami w postaci ciągów znaków. to – [String, Number, Date, DateTime, or TimeOfDay] górna granica zakresu (nie włącznie) lub wartość null. Jeśli wartość to null, będzie ona równa +∞. Granice ciągu znaków są porównywane alfabetycznie z wartościami w postaci ciągów znaków. kolor – kolor, który zostanie zastosowany do tekstu w pasujących komórkach. Wartościami mogą być wartości „#RRGGBB” lub zdefiniowane stałe kolorów (np. „#FF0000” lub „czerwony”). bgcolor – kolor, który zostanie zastosowany do tła pasujących komórek. Wartościami mogą być wartości „#RRGGBB” lub zdefiniowane stałe 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 skalowany tak, by pasował do wartości komórki w zakresie od koloru dolnej do górnej granicy. Pamiętaj, że ta metoda nie może porównywać wartości w postaci ciągów znaków, ponieważ addRange() może to zrobić. Wskazówka: zakresy kolorów są często trudne do dokładnego zmierzenia przez widzów.Najprostszym i najłatwiejszym do odczytania jest zakres od w pełni nasyconego do białego (np. #FF0000–FFFFFF). from – [liczba, data, data, godzina lub godzina] dolna granica (włącznie) zakresu lub wartość null. Jeśli wartość to null, zostanie ona dopasowana do wartości -∞. to – [liczba, data, data, godzina lub godzina] górna granica (niewłącznie) zakresu lub wartość null. Jeśli wartość to null, będzie ona równa +∞. kolor – kolor, który zostanie zastosowany do tekstu w pasujących komórkach. Ten kolor jest taki sam dla wszystkich komórek, niezależnie od ich wartości. fromBgColor – kolor tła komórek zawierających wartości na dole gradientu. Wartościami mogą być wartości „#RRGGBB” lub zdefiniowane stałe kolorów (np. „#FF0000” lub „czerwony”). toBgColor – kolor tła komórek zawierających wartości na górnym końcu gradientu. Wartościami mogą być wartości „#RRGGBB” lub zdefiniowane stałe kolorów (np. „#FF0000” lub „czerwony”).
format(dataTable, columnIndex)	Standardowa metoda format() stosowana do formatowania 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%'});

DateFormat

Formatuje wartość Date JavaScript na różne sposoby, np. „1 stycznia 2016 r.”, „01.01.2016” i „1 stycznia 2016 r.”.

Opcje

DateFormat obsługuje następujące opcje przekazywane do konstruktora:

Option	Opis
formatType	Opcja szybkiego formatowania daty. Obsługiwane są te wartości ciągów znaków, zmieniając format daty 28 lutego 2016 roku w następujący sposób: „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 elementu formatType i pattern.
pattern	Niestandardowy wzorzec formatu stosowany do wartości, podobny do formatu daty i godziny IU. Przykład: var formatter3 = new google.visualization.DateFormat({pattern: "EEE, MMM d, ''yy"}); Nie możesz podać jednocześnie elementu 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. Jest to wartość liczbowa wskazująca czas GMT + wybrana liczba stref czasowych (może być ujemna). Obiekt daty jest domyślnie tworzony z przyjętą strefą czasową komputera, na którym jest tworzony. Ta opcja służy do wyświetlania tej wartości w innej strefie czasowej. Jeśli na przykład utworzysz obiekt Date o 17:00 w południe na komputerze znajdującym się w Greenwich w Anglii, a strefa czasowa jest określona na wartość -5 (options['timeZone'] = -5, czyli wschodni czas pacyficzny w Stanach Zjednoczonych), wyświetlaną wartością będzie 12:00.

Metody

DateFormat obsługuje te metody:

Metoda	Opis
google.visualization.DateFormat(options)	Konstruktor. Więcej informacji znajdziesz w sekcji dotyczącej opcji powyżej.
format(dataTable, columnIndex)	Standardowa metoda format() stosowana do formatowania określonej kolumny.
formatValue(value)	Zwraca sformatowaną wartość podanej 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

Poniżej znajdziesz więcej informacji o obsługiwanych wzorcach:

Te wzorce są podobne do formatu daty i godziny IU, ale te wzorce nie są jeszcze obsługiwane: A e D F g Y u w W. Aby uniknąć kolizji ze wzorcami, cały tekst dosłowny, który ma pojawić się w danych wyjściowych, powinien być otoczony pojedynczymi cudzysłowami poza cudzysłowem pojedynczym, który należy podwoić: np. "K 'o''clock.'".

Wzór	Opis	Przykładowe dane wyjściowe
G	Znacznik ery.	„REKLAMA”
yy lub rrrr	roku.	1996
P	Miesiąc w roku. Styczeń: M daje 1 MM tworzy 01 MMM tworzy stycznia MMMM produkuje w styczniu	„lipiec” „07”
d.	Dzień w miesiącu. Dodatkowe wartości „d” dodają początkowe zera.	10
godz.	Godzina w skali 12-godzinnej. Dodatkowe wartości „h” dodają początkowe zera.	12
H	Godzina w skali 24-godzinnej. Wartości „Dodatkowe Hk” dodają zera na początku.	0
m	Minuta w ciągu godziny. Dodatkowe wartości „M” dodają początkowe zera.	30
s	Sekunda za minutę. Dodatkowe wartości „s” dodają początkowe zera.	55
S	Ułamkowa sekunda. Dodatkowe wartości „S” zostaną dopełnione zerami po prawej stronie.	978
E	Dzień tygodnia. Oto wyniki dla „Wtorek”: E tworzy T Produkcja produkcyjna w EE lub EEE we wt. EEEE dostarcza we wtorek	„Wtorki” "Wtorek"
aa	AM/PM	"PM"
k	Godzina w ciągu dnia (1~24). Dodatkowe wartości „k” dodają początkowe zera.	24
K	Godzina w formacie AM/PM (0~11). Dodatkowe wartości „k” dodają początkowe zera.	0
z	Strefa czasowa. W przypadku strefy czasowej 5 daje ona „UTC+5”	„UTC+5”
Z	Strefa czasowa w formacie RFC 822. W przypadku strefy czasowej -5: Z, ZZ, ZZZ produkuj -0500 ZZZZ i inne produkują „GMT -05:00”	„-0800” „GMT -05:00”
v	Strefa czasowa (ogólnie).	„Itd./GMT-5”
'	Escape dla tekstu	'Data=”
''	pojedynczy cudzysłów	„yy”

NumberFormat

Opisuje sposób formatowania kolumn liczbowych. Opcje formatowania obejmują określenie symbolu prefiksu (np. znaku dolara) lub znaku interpunkcyjnego, który ma być używany jako znacznik tysięcy.

Opcje

NumberFormat obsługuje następujące opcje przekazywane do konstruktora:

Option	Opis
decimalSymbol	Znak, który ma być używany jako znacznik dziesiętny. Wartością domyślną jest kropka (.).
fractionDigits	Liczba określająca liczbę cyfr do wyświetlenia po przecinku. Wartość domyślna to 2. Jeśli podasz więcej cyfr niż zawiera liczba, przy mniejszych wartościach będą wyświetlane zera. Skrócone wartości zostaną zaokrąglone (5 w górę).
groupingSymbol	Znak używany do grupowania cyfr po lewej stronie liczby dziesiętnej na zestawy trzech. Domyślnie jest to przecinek (,).
negativeColor	Kolor tekstu wartości ujemnych. Brak wartości domyślnej. Wartościami mogą być dowolne dozwolone wartości koloru HTML, np. „czerwony” lub „#FF0000”.
negativeParens	Wartość logiczna, gdzie „true” (prawda) oznacza, że wartości ujemne powinny być umieszczone w nawiasach. Wartość domyślna to true (prawda).
pattern	Ciąg tekstowy formatu. Jeśli podasz wartość, wszystkie pozostałe opcje z wyjątkiem negativeColor będą ignorowane. Ciąg formatu jest podzbiorem zestawu wzorców OIOM . Na przykład {pattern:'#,###%'} zwróci wartości wyjściowe „1000%”, „750%” i „50%” dla wartości 10, 7,5 i 0,5.
prefix	Prefiks ciągu znaków wartości, np. „$”.
suffix	Sufiks w postaci ciągu znaków dla wartości, np. „%”.

Metody

NumberFormat obsługuje te metody:

Metoda	Opis
google.visualization.NumberFormat(options)	Konstruktor. Więcej informacji znajdziesz w sekcji dotyczącej opcji powyżej.
format(dataTable, columnIndex)	Standardowa metoda format() stosowana do formatowania określonej kolumny.
formatValue(value)	Zwraca sformatowaną wartość podanej 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 z wyznaczonych kolumn w jedną kolumnę razem z dowolnym tekstem. Jeśli np. masz kolumnę imienia i kolumny z nazwiskiem, w trzeciej kolumnie możesz umieścić takie dane: {last name}, {first name}. Ten kreator formatowania jest niezgodny z konwencjami konstruktora i metody format(). Instrukcje znajdziesz w sekcji Metody poniżej.

Metody

PatternFormat obsługuje te metody:

Metoda	Opis
google.visualization.PatternFormat(pattern)	Konstruktor. Nie przyjmuje obiektu opcji. Zamiast tego korzysta z parametru typu pattern w postaci ciągu znaków. Jest to ciąg znaków określający, które wartości kolumny umieścić w kolumnie docelowej wraz z dowolnym tekstem. Umieść w ciągu znaków obiekty zastępcze, aby wskazać wartość z innej kolumny do umieszczenia. Obiekty zastępcze mają postać {#}, gdzie # to indeks kolumny źródłowej, której chcesz użyć. Indeks jest indeksem w tablicy srcColumnIndices z poniższej metody format(). Aby uwzględnić literał { lub }, użyj znaku zmiany znaczenia, np. \{ lub \}. Aby uwzględnić literał \, zmień jego znaczenie jako \\. Przykładowy kod Ten przykład przedstawia konstruktor wzorca tworzącego element zakotwiczony, którego pierwszy i drugi element są pobierane 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, na której ma działać tabela. srcColumnIndices – tablica z co najmniej 1 indeksem kolumny (liczonym od zera), który ma być pobierany jako źródła z bazowej tabeli DataTable. Będzie ona używana jako źródło danych dla parametru pattern w konstruktorze. Numery kolumn nie muszą być posortowane. opt_dstColumnIndex – [opcjonalnie] kolumna docelowa, w której mają być umieszczane dane wyjściowe wyników manipulacji pattern. Jeśli nie podasz tu nazwy, jako miejsce docelowe zostanie użyty pierwszy element srcColumIndices. Pod tabelą znajdziesz przykłady formatowania.

Oto kilka przykładowych danych wejściowych i wyjściowych dla tabeli czterokolumnowej.

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. Za pomocą obiektu DataView ukrywa on pierwotne kolumny źródłowe:

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%'});

GadgetHelper

Klasa pomocnicza ułatwiająca pisanie gadżetów korzystających z interfejsu GoogleVisual API.

Zespół

google.visualization.GadgetHelper()

Metody

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

Klasy zapytań

Obiekty wymienione poniżej są dostępne do wysyłania zapytań o dane do zewnętrznego źródła danych, np. do arkuszy kalkulacyjnych Google.

• Zapytanie – zawija wychodzące żądanie danych.
• QueryResponse – przetwarza odpowiedź ze źródła danych.

Zapytanie

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

Zespół

google.visualization.Query(dataSourceUrl, opt_options)

Parametry

dataSourceUrl

[Wymagany, Ciąg] URL, na który ma zostać wysłane zapytanie. Zapoznaj się z dokumentacją wykresów i arkuszy kalkulacyjnych dotyczących Arkuszy kalkulacyjnych Google.

opt_options

[opcjonalny, obiekt] Mapa opcji związanych z żądaniem. Uwaga: nie używaj tego parametru, jeśli masz dostęp do ograniczonego źródła danych . Obsługiwane właściwości:

• sendMethod – [opcjonalny, ciąg znaków] określa metodę, która ma zostać użyta do wysłania zapytania. Wybierz jedną z tych wartości ciągu znaków:
  • 'xhr' – wyślij zapytanie za pomocą XmlHttpRequest.
  • 'scriptInjection' – wysyłanie zapytania za pomocą funkcji wstrzykiwania skryptu.
  • 'makeRequest' – [dostępne tylko w przypadku gadżetów, które zostały wycofane] Wyślij zapytanie za pomocą metody makeRequest() Widget API. Jeśli określisz parametr, musisz też podać właściwość makeRequestParams.
  • 'auto' – użyj metody określonej w parametrze adresu URL tqrt w adresie URL źródła danych. tqrt może mieć te wartości: „xhr”, „scriptInjection” lub „makeRequest”. Jeśli brakuje parametru tqrt lub ma on nieprawidłową wartość, domyślna wartość to „xhr” w przypadku żądań dotyczących tej samej domeny i „scriptInjection” w przypadku żądań między domenami.
• makeRequestParams – [Object] mapa parametrów zapytania makeRequest(). Używana i wymagana tylko wtedy, gdy sendMethod to „makeRequest”.

Metody

Metoda	Zwracana wartość	Opis
abort()	Brak	Zatrzymuje automatyczne wysyłanie zapytania, które zostało rozpoczęte za pomocą funkcji setRefreshInterval().
setRefreshInterval(seconds)	Brak	Ustawia zapytanie tak, aby automatycznie wywoływało metodę send co określony czas trwania (liczbę sekund), począwszy od pierwszego jawnego wywołania do send. seconds jest liczbą większą niż lub równą 0. Jeśli używasz tej metody, wywołaj ją przed wywołaniem metody send. Anuluj tę metodę, wywołując ją ponownie z zero (domyślnie) lub wywołując abort().
setTimeout(seconds)	Brak	Określa liczbę sekund oczekiwania na odpowiedź źródła danych, zanim spowoduje to zwiększenie błędu limitu czasu. seconds jest liczbą większą niż 0. Domyślny limit czasu to 30 sekund. Ta metoda (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. Ta metoda (jeśli jest używana) powinna zostać wywołana 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 uzyskaniu odpowiedzi źródła danych. Funkcja wywołania zwrotnego otrzyma pojedynczy parametr typu google.visualization.QueryResponse.

QueryResponse

Reprezentuje odpowiedź na wykonanie zapytania otrzymaną ze źródła danych. Instancja tej klasy jest przekazywana jako argument funkcji wywołania zwrotnego ustawionej przy wywołaniu Query.send.

Metody

Metoda	Zwracana wartość	Opis
getDataTable()	DataTable	Zwraca tabelę danych w postaci zwróconej przez źródło danych. Zwraca wartość null, jeśli wykonanie zapytania nie powiodło się i nie zostały zwrócone żadne dane.
getDetailedMessage()	Ciąg znaków	Zwraca szczegółowy komunikat o błędzie w przypadku zapytań, które zakończyły się niepowodzeniem. Jeśli wykonanie zapytania się udało, ta metoda zwraca pusty ciąg znaków. Zwrócona wiadomość jest przeznaczona dla programistów i może zawierać informacje techniczne, na przykład „Kolumna {salary} nie istnieje”.
getMessage()	Ciąg znaków	Zwraca krótki komunikat o błędzie w przypadku nieudanych zapytań. Jeśli wykonanie zapytania się uda, ta metoda zwróci pusty ciąg znaków. Zwracana wiadomość to krótki komunikat przeznaczony dla użytkowników, na przykład „Nieprawidłowe zapytanie” lub „Odmowa dostępu”.
getReasons()	Tablica ciągów	Zwraca tablicę z zerową liczbą kolejnych wpisów. Każdy wpis to krótki ciąg z kodem błędu lub ostrzeżenia, który został zgłoszony 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 1 wiersz danych, który pasuje do wyboru zapytania, nie został zwrócony z powodu limitów 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 wykonanie zapytania się nie udało, a odpowiedź nie zawiera żadnej tabeli danych. Zwraca wartość <false>, jeśli wykonanie zapytania zostało wykonane, a odpowiedź zawiera tabelę danych.

Wyświetlanie błędów

Interfejs API udostępnia kilka funkcji, które ułatwiają wyświetlanie użytkownikom niestandardowych komunikatów o błędach. Aby korzystać z tych funkcji, udostępnij element kontenera na stronie (zwykle jest to <div>), do którego interfejs API wygeneruje sformatowany komunikat o błędzie. Ten kontener może być kontenerem wizualizacji lub kontenerem przeznaczonym wyłącznie do błędów. Jeśli określisz element zawierający wizualizację, komunikat o błędzie będzie wyświetlany nad wizualizacją. Następnie wywołaj odpowiednią funkcję poniżej, aby wyświetlić lub usunąć komunikat o błędzie.

Wszystkie funkcje są funkcjami statycznymi w przestrzeni nazw google.visualization.errors.

Wiele wizualizacji może generować zdarzenie błędu. Zapoznaj się z poniższym zdarzeniem błędu, aby dowiedzieć się więcej na ten temat.

Przykładowy błąd niestandardowy znajdziesz w Przykładowym kodzie towarzyszącym zapytania.

Funkcja	Zwracana wartość	Opis
addError(container, message, opt_detailedMessage, opt_options)	Wartość identyfikatora ciągu znaków, która identyfikuje utworzony obiekt błędu. Jest to unikalna wartość na stronie, która może służyć do usunięcia błędu lub odnalezienia elementu, który go zawiera.	Dodaje do określonego elementu strony blok wyświetlania błędów z określonym tekstem i formatowaniem. container – element DOM, do którego ma zostać wstawiony komunikat o błędzie. Jeśli nie będzie można znaleźć kontenera, funkcja zwróci błąd JavaScriptu. message – ciąg tekstowy do wyświetlenia. opt_detailedMessage – opcjonalny szczegółowy ciąg tekstowy komunikatu. Domyślnie jest to tekst wyświetlany po najechaniu kursorem myszy, ale możesz to zmienić we właściwości opt_options.showInToolTip opisanej poniżej. opt_options – opcjonalny obiekt z właściwościami, które ustawiają różne opcje wyświetlania wiadomości. Obsługiwane są te opcje: showInTooltip – wartość logiczna, gdzie „true” wyświetla szczegółowy komunikat tylko jako tekst etykietki, a wartość false – w treści kontenera po krótkim komunikacie. Wartość domyślna to true (prawda). type – ciąg tekstowy opisujący typ błędu określający, które style CSS mają zostać zastosowane do tej wiadomości. Obsługiwane wartości to „error” i „ostrzeżenie”. Wartość domyślna to „error”. style – ciąg stylu komunikatu o błędzie. Ten styl zastąpi wszystkie style zastosowane do typu ostrzeżenia (opt_options.type). Przykład: 'background-color: #33ff99; padding: 2px;' Wartością domyślną jest pusty ciąg znaków. reovable – wartość logiczna, gdzie wartość true oznacza, że wiadomość można zamknąć kliknięciem myszy. Wartość domyślna to false.
addErrorFromQueryResponse(container, response)	Wartość identyfikatora ciągu znaków, która identyfikuje utworzony obiekt błędu, lub wartość null, jeśli odpowiedź nie wskazuje błędu. Jest to unikalna wartość na stronie, która może służyć do usunięcia błędu lub odnalezienia elementu, który go zawiera.	Przekaż odpowiedź na zapytanie i kontener komunikatu o błędzie do tej metody. Jeśli odpowiedź na zapytanie wskazuje na błąd zapytania, w podanym elemencie strony wyświetli się komunikat o błędzie. Jeśli odpowiedź na zapytanie ma wartość null, metoda zwróci błąd JavaScriptu. Aby wyświetlić błąd, przekaż do tej wiadomości otrzymaną odpowiedź QueryResponse w module obsługi zapytania. Dopasuje też styl wyświetlania do danego typu (błąd lub ostrzeżenie, podobnie jak w polu addError(opt_options.type)). container – element DOM, do którego ma zostać wstawiony komunikat o błędzie. Jeśli nie będzie można znaleźć kontenera, funkcja zwróci błąd JavaScriptu. response – obiekt QueryResponse odebrany przez moduł obsługi zapytania w odpowiedzi na zapytanie. Jeśli ma wartość null, metoda zwróci błąd JavaScriptu.
removeError(id)	Wartość logiczna: true, jeśli błąd został usunięty. W przeciwnym razie ma wartość false (fałsz).	Usuwa ze strony błąd określony za pomocą identyfikatora. id – identyfikator ciągu znaków związany z błędem utworzonym za pomocą właściwości addError() lub addErrorFromQueryResponse().
removeAll(container)	Brak	Usuwa wszystkie bloki błędów z określonego kontenera. Jeśli podany kontener nie istnieje, spowoduje to zgłoszenie błędu. container – element DOM zawierający ciągi błędów do usunięcia. Jeśli nie będzie można znaleźć kontenera, funkcja zwróci błąd JavaScriptu.
getContainer(errorId)	Uchwyt do elementu DOM zawierającego określony błąd lub wartość null, jeśli nie można go znaleźć.	Pobiera uchwyt do elementu kontenera zawierającego błąd określony przez errorID. errorId – identyfikator ciągu znaków błędu utworzonego za pomocą metody addError() lub addErrorFromQueryResponse().

Zdarzenia

Większość wizualizacji uruchamia zdarzenia, by zasygnalizować, że coś wystąpiło. Jako użytkownik wykresu często chcesz nasłuchiwać tych zdarzeń. Jeśli kodujesz własną wizualizację, możesz też samodzielnie aktywować takie zdarzenia.

Poniższe metody umożliwiają programistom nasłuchiwanie zdarzeń, usuwanie istniejących modułów obsługi zdarzeń i aktywowanie zdarzeń z poziomu wizualizacji.

• google.visualization.events.addListener() i google.visualization.events.addOneTimeListener() nasłuchują zdarzeń.
• Polecenie google.visualization.events.removeListener() usuwa istniejący detektor
• google.visualization.events.removeAllListeners() usuwa wszystkie detektory określonego wykresu.
• google.visualization.events.trigger() uruchamia zdarzenie.

addListener()

Wywołaj tę metodę, aby się zarejestrować, aby otrzymywać zdarzenia wywoływane przez wizualizację hostowaną na Twojej stronie. Musisz udokumentować, które argumenty zdarzenia (jeśli w ogóle) będą przekazywane do funkcji obsługi.

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

source_visualization

Uchwyt do instancji wizualizacji źródłowej.

event_name

Nazwa ciągu znaków zdarzenia, które ma być nasłuchiwane. Wizualizacja powinna dokumentować generowane zdarzenia.

handling_function

Nazwa lokalnej funkcji JavaScriptu, która ma być wywoływana, gdy source_visualization wywoła zdarzenie event_name. Funkcja obsługi przekazuje wszystkie argumenty zdarzenia jako parametry.

Zwroty

Moduł obsługi nowego detektora. W razie potrzeby można go później użyć do usunięcia tego odbiornika przez wywołanie google.visualization.events.removeListener().

Przykład

Oto przykład rejestracji, aby otrzymać wydarzenie 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()

Ta funkcja jest identyczna jak addListener(), ale dotyczy zdarzeń, które powinny być odsłuchiwane tylko raz. Kolejne zdarzenia zdarzenia nie będą wywoływać funkcji obsługi.

Przykład zastosowania: każde losowanie powoduje wywołanie zdarzenia ready. Jeśli chcesz, by kod ready uruchamiał Twój kod tylko za pierwszym razem, wybierz addOneTimeListener zamiast addListener.

removeListener()

Wywołaj tę metodę, aby wyrejestrować istniejący detektor zdarzeń.

google.visualization.events.removeListener(listener_handler)

listener_handler

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

removeAllListeners()

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

google.visualization.events.removeAllListeners(source_visualization)

source_visualization

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

trigger()

Wywoływane przez implementatory wizualizacji. Wywołaj tę metodę z wizualizacji, aby uruchomić zdarzenie z dowolną nazwą i zbiorem wartości.

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

source_visualization

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

event_name

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

event_args

[opcjonalnie] Mapa par nazwa-wartość, które są przekazywane do metody odbierania. Na przykład: {message: "Cześć!", wynik: 10, name: "Marek"}. Możesz przekazać wartość null, jeśli nie są potrzebne żadne zdarzenia. Odbiorca powinien być gotowy na zaakceptowanie wartości null w przypadku tego parametru.

Przykład

Oto przykład wizualizacji, która po wywołaniu jej metody „select” wywołuje metodę „select”. Nie zwraca on ż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 udostępniać ten zestaw wymaganych i opcjonalnych metod i właściwości. Pamiętaj jednak, że nie ma możliwości sprawdzenia typu, aby egzekwować te standardy, dlatego musisz zapoznać się z dokumentacją każdej wizualizacji.

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

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

Konstruktor

Konstruktor powinien mieć nazwę klasy wizualizacji i zwrócić instancję tej klasy.

visualization_class_name(dom_element)

dom_element

Wskaźnik do elementu DOM, w którym powinna zostać umieszczona wizualizacja.

Przykład

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

draw()

Rysuje wizualizację na stronie. Może to być na przykład pobranie grafiki z serwera lub utworzenie grafiki na stronie przy użyciu powiązanego kodu wizualizacji. Należy ją wywoływać za każdym razem, gdy dane lub opcje zmienią się. Obiekt powinien zostać narysowany wewnątrz elementu DOM przekazywanego do konstruktora.

draw(data[, options])

dane

DataTable lub DataView przechowujący dane używane do rysowania wykresu. Nie ma standardowej metody wyodrębniania pola DataTable z wykresu.

opcje

[Opcjonalnie] Mapa par nazwa/wartość opcji niestandardowych. Mogą to być na przykład wysokość i szerokość, kolory tła i podpisy. Dokumentacja wizualizacji powinna zawierać listę dostępnych opcji i obsługiwać opcje domyślne, jeśli nie określisz tego parametru. Za pomocą składni literału obiektu JavaScript możesz przekazać mapę 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 on opcjonalnie widoczny w wizualizacjach z etykietkami i zezwalającymi na działania etykietek.

Zwraca obiekt działania etykietki z żądanym obiektem actionID.

Przykład:

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

getSelection()

Są one opcjonalnie widoczne dla wizualizacji, które umożliwiają dostęp do wybranych aktualnie danych na ilustracji.

selection_array getSelection()

Zwroty

selection_array – tablica wybranych obiektów, z których każdy opisuje element danych w tabeli bazowej użytej do utworzenia wizualizacji (DataView lub DataTable). Każdy obiekt ma właściwości row lub column, z indeksem wiersza lub kolumny wybranego elementu w bazowym elemencie DataTable. Jeśli właściwość row ma wartość null, wybrana jest kolumna. Jeśli właściwość column ma wartość null, wybór jest wierszem. Jeśli obie wartości mają wartość null, jest to konkretny element danych. Możesz wywołać metodę DataTable.getValue(), aby uzyskać wartość wybranego elementu. Pobraną tablicę można przekazać do klasy 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 on opcjonalnie widoczny w wizualizacjach z etykietkami i zezwalającymi na działania etykietek.

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

Przykład:

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

setAction()

Jest on opcjonalnie widoczny w wizualizacjach z etykietkami i zezwalającymi na działania etykietek. Działa on tylko w przypadku wykresów podstawowych (słupkowe, kolumnowe, liniowe, warstwowe, punktowe, kombi, bąbelkowe, kołowe, pierścieniowe, świecowe, histogram, warstwowe).

Ustawia działanie etykietki, które ma być wykonywane po kliknięciu tekstu działania przez użytkownika.

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 być widoczny w etykietce działania, oraz action – funkcję, która powinna zostać uruchomiona po kliknięciu tekstu działania przez użytkownika.

Przed wywołaniem metody draw() wykresu należy ustawić wszystkie działania związane z etykietką.

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 one być funkcjami, które zwracają wartości boolean wskazujące, czy działanie etykietki będzie widoczne lub włączone.

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, np. punkt na wykresie warstwowym lub słupek na wykresie słupkowym. Po wywołaniu tej metody wizualizacja powinna wizualnie pokazywać, na czym polega nowy wybór. Implementacja funkcji setSelection() nie powinna wywoływać zdarzenia „select”. Wizualizacje mogą zignorować część zaznaczenia. Na przykład tabela, która może zawierać tylko wybrane wiersze, może zignorować elementy komórki lub kolumny w implementacji setSelection() albo może wybrać cały wiersz.

Przy każdym wywołaniu tej metody wszystkie zaznaczone elementy zostają odznaczone i należy zastosować nową przekazaną listę wyboru. Nie można wprost odznaczać poszczególnych elementów. Aby odznaczyć poszczególne elementy, wywołaj funkcję setSelection() z elementami, które pozostaną zaznaczone. Aby usunąć zaznaczenie wszystkich elementów, wywołaj setSelection(), setSelection(null) lub setSelection([]).

setSelection(selection_array)

selection_array

Tablica obiektów, każdy z liczbową właściwością wiersza lub kolumny. row i column to liczony od zera numer wiersza lub kolumny elementu w tabeli danych, który chcesz wybrać. Aby zaznaczyć całą kolumnę, ustaw row na wartość null. Aby zaznaczyć cały wiersz, ustaw column na wartość null. Przykład: setSelection([{row:0,column:1},{row:1, column:null}]) zaznacza komórkę w miejscu (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.

arrayToDataTable()

Ta metoda przyjmuje dwuwymiarową tablicę i przekształca ją w DataTable.

Typy danych w kolumnach 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) tablicy (np. {label: 'Start Date', type: 'date'}). Możesz też używać opcjonalnych ról danych, ale muszą one być jawnie zdefiniowane za pomocą notacji literału obiektu. W przypadku dowolnej komórki możesz też użyć notacji literału obiektu, co pozwala na definiowanie obiektów komórek.

Składnia

google.visualization.arrayToDataTable(twoDArray, opt_firstRowIsData)

twoDArray

Dwuwymiarowa tablica, w której każdy wiersz odpowiada wierszowi w tabeli danych. Jeśli parametr opt_firstRowIsData ma wartość false (fałsz), pierwszy wiersz jest interpretowany jako etykiety nagłówków. Typy danych w każdej kolumnie są automatycznie interpretowane na podstawie podanych informacji. Jeśli komórka nie ma wartości, podaj wartość null lub pustą wartość.

opt_firstRowIsData

Określ, czy pierwszy wiersz definiuje wiersz nagłówka. Jeśli ma wartość prawda, przyjmuje się, że wszystkie wiersze zawierają dane. Jeśli wartość to fałsz, przyjmuje się, że pierwszy wiersz jest wierszem nagłówka, a wartości są przypisane jako etykiety kolumn. Wartość domyślna to false (fałsz).

Zwroty

Nowy DataTable.

Przykłady

Poniższy kod ilustruje 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);

drawChart()

Ta metoda powoduje utworzenie wykresu w pojedynczym wywołaniu. Zaletą tej metody jest to, że wymaga ona trochę mniej kodu. Można też zserializować i zapisywać wizualizacje jako ciągi tekstowe do ponownego wykorzystania. Ta metoda nie zwraca uchwytu do utworzonego wykresu, dlatego nie możesz przypisać detektorów metody do zdarzeń na wykresie przechwytywania.

Składnia

google.visualization.drawChart(chart_JSON_or_object)

chart_JSON_or_object

Ciąg literału JSON lub obiekt JavaScript z tymi właściwościami (z uwzględnieniem wielkości liter):

Właściwość	Typ	Wymagane	Domyślne	Opis
chartType	Ciąg znaków	Wymagane	brak	Nazwa klasy wizualizacji. Na wykresach Google można 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. Jeśli jest to wizualizacja Google, musisz wczytać wizualizacje zewnętrzne bezpośrednio. Przykłady: Table, PieChart, example.com.CrazyChart.
containerId	Ciąg znaków	Wymagane	brak	Identyfikator elementu DOM na stronie, w którym będzie przechowywana wizualizacja.
Opcje	Obiekt	Opcjonalnie	brak	Obiekt opisujący opcje wizualizacji. Możesz użyć notacji literału JavaScript lub podać uchwyt obiektu. Przykład: "options": {"width": 400, "height": 240, "is3D": true, "title": "Company Performance"}
dataTable	Obiekt	Opcjonalnie	Brak	Pole DataTable używane do wypełniania wizualizacji. Może to być literałowa reprezentacja tabeli DataTable w postaci ciągu JSON, jak opisano powyżej, uchwyt wypełnionego obiektu google.visualization.DataTable lub dwuwymiarowa tablica, np. akceptowanej przez arrayToDataTable(opt_firstRowIsData=false) . Musisz określić tę właściwość lub właściwość dataSourceUrl.
dataSourceUrl	Ciąg znaków	Opcjonalnie	Brak	Zapytanie do źródła danych służące do wypełniania danych na wykresie (np. arkusz kalkulacyjny Google). Musisz wybrać tę właściwość lub właściwość dataTable.
zapytanie	Ciąg znaków	Opcjonalnie	Brak	Jeśli określisz właściwość dataSourceUrl, możesz opcjonalnie określić ciąg zapytania podobny do SQL za pomocą języka zapytań wizualizacji do filtrowania danych lub manipulowania nimi.
refreshInterval	Liczby	Opcjonalnie	Brak	Częstotliwość (w sekundach) wizualizacja powinna odświeżać źródło zapytania. Używaj go tylko podczas określania właściwości dataSourceUrl.
widok	Obiekt LUB tablica	Opcjonalnie	Brak	Ustawia obiekt inicjatora DataView, który działa jak filtr danych bazowych, zdefiniowany za pomocą parametru dataTable lub dataSourceUrl. Możesz przekazać ciąg lub obiekt inicjujący DataView, np. zwracany przez funkcję dataview.toJSON(). Przykład: "view": {"columns": [1, 2]} możesz też przekazać tablicę obiektów inicjujących DataView. W takim przypadku pierwszy element DataView z tablicy zostanie zastosowany do danych bazowych w celu utworzenia nowej tabeli danych, drugi DataView zostanie zastosowany do tabeli danych wynikającej z zastosowania pierwszego obiektu DataView i tak dalej.

Przykłady

Tworzy wykres tabelaryczny 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>

Następny przykład tworzy tę samą tabelę, ale lokalnie tworzy 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>

W tym przykładzie jest to ciąg znaków JSON reprezentujący wykres, który mógł 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()

Jest to konstruktor elementu paska narzędzi, który można dołączyć do wielu wizualizacji. Umożliwia on użytkownikom eksportowanie danych wizualizacji do różnych formatów lub udostępnianie ich wersji z możliwością osadzenia i używania ich w różnych miejscach. Więcej informacji i przykładowy kod znajdziesz na stronie paska narzędzi.