Omówienie
Tabela, którą można sortować i dzielić na strony. Komórki tabeli można sformatować za pomocą ciągów formatowania lub bezpośrednio wstawiając HTML jako wartości komórek. Wartości liczbowe są wyrównane do prawej. Wartości logiczne są wyświetlane jako znaczniki wyboru. Użytkownicy mogą wybierać pojedyncze wiersze, używając klawiatury lub myszy. Użytkownicy mogą sortować wiersze, klikając nagłówki kolumn. Wiersz nagłówka pozostaje nieruchomy podczas przewijania. Tabela uruchamia wiele zdarzeń odpowiadających interakcji użytkownika.
Przykład
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['table']}); google.charts.setOnLoadCallback(drawTable); function drawTable() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Name'); data.addColumn('number', 'Salary'); data.addColumn('boolean', 'Full Time Employee'); data.addRows([ ['Mike', {v: 10000, f: '$10,000'}, true], ['Jim', {v:8000, f: '$8,000'}, false], ['Alice', {v: 12500, f: '$12,500'}, true], ['Bob', {v: 7000, f: '$7,000'}, true] ]); var table = new google.visualization.Table(document.getElementById('table_div')); table.draw(data, {showRowNumber: true, width: '100%', height: '100%'}); } </script> </head> <body> <div id="table_div"></div> </body> </html>
Wczytuję
Nazwa pakietu google.charts.load
to "table"
.
google.charts.load('current', {packages: ['table']});
Nazwa klasy wizualizacji to google.visualization.Table
.
var visualization = new google.visualization.Table(container);
Format danych
Tabela danych jest przekonwertowana na odpowiednią tabelę HTML, a każdy wiersz/kolumna w tabeli danych została przekonwertowana na wiersz/kolumnę w tabeli HTML. Każda kolumna musi mieć ten sam typ danych. Obsługiwane są wszystkie standardowe typy danych wizualizacji (ciąg znaków, wartość logiczna, liczba itp.).
Właściwości niestandardowe
Do elementów tabeli danych możesz przypisać te właściwości niestandardowe za pomocą metody setProperty()
w DataTable.
Nazwa usługi | Dotyczy | Opis |
---|---|---|
nazwa_klasy | Komórka | Nazwa klasy ciągu, którą chcesz przypisać do pojedynczej komórki. Użyj tej opcji, aby przypisać styl CSS do poszczególnych komórek. |
styl | Komórka | Ciąg znaków do przypisania w komórce do tekstu. Spowoduje to zastąpienie stylów klasy CSS zastosowanych w tej komórce. Aby to zadziałało, musisz ustawić właściwość allowHtml=true. Przykład: 'border: 1px solid green;' . |
Przykład
dataTable.setCell(22, 2, 15, 'Fifteen', {style: 'font-style:bold; font-size:22px;'});
Opcje konfiguracji
Nazwa | |
---|---|
allowHTML |
Jeśli ma wartość Prawda, sformatowane wartości komórek zawierających tagi HTML są renderowane jako HTML. Jeśli ma wartość Fałsz, większość niestandardowych formatów nie będzie działać prawidłowo. Typ: wartość logiczna
Wartość domyślna: false
|
zmienne wiersze |
Określa, czy zmienne kolory są przypisywane do wierszy parzystych i nieparzystych. Typ: wartość logiczna
Wartość domyślna: true
|
Nazwa klasy CSS |
Obiekt, w którym każda nazwa właściwości opisuje element tabeli, a wartość właściwości jest ciągiem określającym klasę, którą można przypisać do tego elementu tabeli. Za pomocą tej właściwości możesz przypisać niestandardowy CSS do określonych elementów tabeli. Aby użyć tej właściwości, przypisz obiekt, w którym nazwa właściwości określa element tabeli, a wartość właściwości jest ciągiem znaków określającym nazwę klasy, którą chcesz do niego przypisać. Następnie musisz zdefiniować na swojej stronie styl usługi porównywania cen dla tej klasy. Obsługiwane są te nazwy właściwości:
Przykład:
Uwaga: w CSS niektóre elementy zastępują pozostałe. Jeśli na przykład określisz kolor tła elementów Typ: obiekt
Domyślne:null
|
pierwszy wiersz |
Numer wiersza w pierwszym wierszu tabeli danych. Używany tylko wtedy, gdy parametr showRowNumber ma wartość Prawda. Typ: liczba
Wartość domyślna: 1
|
zablokowane kolumny |
Liczba kolumn po lewej stronie, które zostaną zablokowane. Te kolumny pozostaną bez zmian podczas przewijania pozostałych kolumn w poziomie. Jeśli Typ: liczba
Domyślne:null
|
wysokość |
Ustawia wysokość elementu kontenera wizualizacji. Możesz używać standardowych jednostek HTML (np. „100px”, „80em” lub „60”). Jeśli nie podasz żadnych jednostek, przyjmuje się, że liczba pikseli to. Jeśli nie określisz tego ustawienia, przeglądarka automatycznie dostosuje wysokość tak, by pasowała do tabeli. Jeśli ustawisz wartość mniejszą niż wymagana, w tabeli pojawi się pionowy pasek przewijania (wiersz nagłówka również zostanie zablokowany). Jeśli ustawiona jest wartość 100%, tabela rozwija się maksymalnie do elementu kontenera. Typ: ciąg znaków
Domyślna:automatycznie.
|
strona |
Czy i jak włączyć stronicowanie przez dane. Wybierz jedną z tych wartości ciągu:
Typ: ciąg znaków
Domyślne: „disable” (wyłącz).
|
pageSize (rozmiar_strony) |
Liczba wierszy na każdej stronie przy włączonej opcji stronicowania z użyciem opcji strony. Typ: liczba
Wartość domyślna: 10
|
przyciski stronicowania |
Ustawia określoną opcję przycisków stronicowania. Dostępne opcje:
Typ: ciąg znaków lub liczba
Domyślny: „auto”.
|
Tabela RTL |
Dodaje podstawową obsługę języków pisanych od prawej do lewej (np. arabskiego lub hebrajskiego) dzięki odwróceniu kolejności kolumn w tabeli. W ten sposób, że pierwsza kolumna jest najbardziej po prawej, a ostatnią jest lewa. Nie ma to wpływu na indeks kolumn w danych podstawowych, tylko na kolejność wyświetlania. Ta wizualizacja tabeli nie jest obsługiwana w pełnym języku dwukierunkowym (BiDi). Ta opcja jest ignorowana, jeśli włączasz stronicowanie (przy użyciu opcji strony) lub jeśli w tabeli są paski przewijania, ponieważ określone opcje wysokości i szerokości są mniejsze niż wymagany rozmiar tabeli. Typ: wartość logiczna
Wartość domyślna: false
|
ScrollLeftStartPosition |
Ustawia pozycję przewijania w poziomie w pikselach, jeśli tabela ma poziome paski przewijania, ponieważ ustawiono właściwość szerokości. Tabela otworzy się po przesunięciu tak dużej liczby pikseli za pierwszą kolumną po lewej stronie. Typ: liczba
Wartość domyślna: 0
|
pokaż wiersz_numeru |
Jeśli ustawiona jest wartość prawda, numer wiersza jest wyświetlany jako pierwsza kolumna tabeli. Typ: wartość logiczna
Wartość domyślna: false
|
sortuj |
czy i jak sortować kolumny, gdy użytkownik kliknie nagłówek kolumny; Jeśli masz włączone sortowanie, możesz także ustawić właściwości sortAscending i sortcolumn. Wybierz jedną z tych wartości ciągu:
Typ: ciąg znaków
Domyślny: „enable”
|
sortuj rosnąco |
Kolejność posortowanej początkowej kolumny. Prawda – rosnąco – fałsz – malejąco. Jeśli nie określono właściwości Typ: wartość logiczna
Wartość domyślna: true
|
kolumna sortowania |
Indeks kolumny w tabeli danych, według której tabela jest początkowo sortowana. Kolumna zostanie oznaczona małą strzałką oznaczającą kolejność sortowania. Typ: liczba
Wartość domyślna: -1
|
strona startowa |
Pierwsza strona tabeli do wyświetlenia. Używana tylko wtedy, gdy zasada Typ: liczba
Wartość domyślna: 0
|
szerokość |
Określa szerokość elementu kontenera wizualizacji. Możesz używać standardowych jednostek HTML (np. „100px”, „80em” lub „60”). Jeśli nie podasz żadnych jednostek, przyjmuje się, że liczba pikseli to. Jeśli nie określisz tego ustawienia, przeglądarka automatycznie dostosuje szerokość, aby pasowała do tabeli. Jeśli ustawisz wartość mniejszą niż wymagana, w tabeli zostanie dodany poziomy pasek przewijania. Jeśli ustawisz wartość „100%”, tabela zostanie rozwinięta maksymalnie do elementu kontenera. Typ: ciąg znaków
Domyślna: automatycznie.
|
Metody
Metoda | |
---|---|
draw(data, options) |
Rysuje tabelę. Typ zwrotu: brak
|
getSelection() |
Standardowa implementacja getSelection. Elementy wyboru to wszystkie wiersze. Może zwrócić więcej niż 1 wybrany wiersz. Indeksy wierszy w obiekcie wyboru odwołują się do pierwotnej tabeli danych niezależnie od interakcji użytkownika (sortowania, podziału na strony itp.). Przełącznik zaznaczenia: kliknięcie komórki po raz pierwszy powoduje jej wybór. Kliknięcie komórki ponownie ją odznacza, co skutkuje zdarzeniem wyboru, ale w pobranym obiekcie zaznaczenia nie są zaznaczone żadne elementy. Typ zwrotu: tablica elementów wyboru.
|
getSortInfo() |
Wywołuj tę metodę, aby pobrać informacje o bieżącym stanie sortowania tabeli, która została posortowana (zwykle według użytkownika, który kliknął nagłówek kolumny, aby posortować wiersze według określonej kolumny). Jeśli wyłączysz sortowanie, ta metoda nie zadziała. Jeśli dane nie zostały posortowane w kodzie lub użytkownik nie posortował ich za pomocą kodu, zwrócone zostaną domyślne wartości sortowania. Typ zwrotu: obiekt o tych właściwościach:
|
setSelection(selection) |
Standardowa implementacja Typ zwrotu: brak
|
clearChart() |
Czyści wykres i usuwa wszystkie przydzielone zasoby. Typ zwrotu: brak
|
Zdarzenia
Nazwa | |
---|---|
wybierz |
Standardowe zdarzenie wyboru, ale można wybrać tylko całe wiersze. Właściwości: brak
|
strona |
Wywoływane, gdy użytkownicy klikają przycisk nawigacyjny strony. Właściwości:
page : liczba. Indeks strony, do której należy przejść. |
sortuj |
Wywoływane, gdy użytkownicy klikają nagłówek kolumny, a opcja sortowania nie jest wyłączona. Właściwości: obiekt o tych właściwościach:
|
gotowa |
Wykres jest gotowy do wywołań metod zewnętrznych. Jeśli chcesz korzystać z wykresu i metod wywoływania po jego narysowaniu, skonfiguruj odbiornik dla tego zdarzenia, zanim wywołasz metodę rysowania, i wywołaj je dopiero po wywołaniu zdarzenia. Właściwości: brak
|
Formaty
Uwaga: wizualizacja tabel zawiera zestaw obiektów formatowania, które zostały zastąpione przez formatery ogólne, które zachowują się tak samo, ale można ich używać w dowolnej wizualizacji.
Poniższa tabela zawiera starsze narzędzie do formatowania tabel i odpowiadające mu formatowanie ogólne. Podczas pisania nowego kodu używaj ogólnego formatowania.
Narzędzie do formatowania tabel | |
---|---|
Format strzałki w tabeli | google.visualization.ArrowFormat |
Format_tabeli | google.visualization.BarFormat, |
Tabelakolorów | google.visualization.ColorFormat |
Format daty tabeli | google.visualization.DateFormat, |
Format_numeru_tabeli | google.visualization.NumberFormat |
Format_szablonu_tabeli | google.visualization.PatternFormat |
Ważne: formatery często używają HTML do formatowania tekstu, dlatego ustaw opcję allowHtml
na true
.
Zasady dotyczące danych
Cały kod i dane są przetwarzane i renderowane w przeglądarce. Żadne dane nie są wysyłane do żadnego serwera.