Na tej stronie omawiamy reprezentację danych wewnętrznych używaną na wykresach, klasy DataTable i DataView służące do przekazywania danych na wykres, a także różne sposoby tworzenia instancji i wypełniania pól DataTable.
Spis treści
- W jaki sposób dane są przedstawiane na wykresie
- Jakiego schematu tabeli używa mój wykres?
- DataTables i DataView
- Tworzenie i wypełnianie tabeli danych
- dataTableToCsv()
- Więcej informacji
Sposób przedstawiania danych na wykresie
Wszystkie wykresy przechowują dane w tabeli. Oto uproszczona reprezentacja wypełnionej dwukolumnowej tabeli danych:
index: 0 |
index: 1 type: number label: 'Godziny dziennie' |
|---|---|
| 'Praca' | 11 |
| 'Jedzenie' | 2 |
| Trasa dojazdu | 2 |
| 'Oglądanie telewizji' | 2 |
| 'Sen' | 7 |
Dane są przechowywane w komórkach, do których odwołują się komórki (wiersz, kolumna), gdzie wiersz to indeks wierszy liczony od zera, a kolumna to indeks kolumny liczony od zera lub unikalny identyfikator, który możesz określić.
Oto pełniejsza lista obsługiwanych elementów i właściwości tabeli. Więcej informacji znajdziesz w sekcji Format parametru literału JavaScript konstruktora:
- Tabela – tablica kolumn i wierszy oraz opcjonalna mapa dowolnych par nazwa/wartość, które możesz przypisać. Właściwości na poziomie tabeli nie są obecnie używane na wykresach.
- Kolumny – każda kolumna obsługuje wymagany typ danych, a także opcjonalną etykietę ciągu znaków, identyfikator, wzorzec i mapę dowolnych właściwości nazwy/wartości. Etykieta jest łatwym w użyciu ciągiem znaków, który można wyświetlić na wykresie. Identyfikator to opcjonalny identyfikator, którego można użyć zamiast indeksu kolumny. Do kolumny można się odwoływać w kodzie za pomocą indeksu liczonego od zera lub za pomocą opcjonalnego identyfikatora. Listę obsługiwanych typów danych znajdziesz tutaj:
DataTable.addColumn(). - Wiersze – wiersz to tablica komórek oraz opcjonalna mapa dowolnych par nazwa/wartość, które możesz przypisać.
- Komórki – każda komórka to obiekt zawierający rzeczywistą wartość typu kolumny oraz opcjonalną wersję wpisanej przez Ciebie wartości w formacie ciągu znaków. Na przykład do kolumny liczbowej można przypisać wartość 7 i sformatowaną wartość „siedem”.
Jakiego schematu tabeli używa mój wykres?
Na różnych wykresach używane są tabele w różnych formatach: na przykład na wykresie kołowym tabela dwukolumnowa zawiera kolumnę z ciągami znaków i kolumnę liczbową, gdzie każdy wiersz opisuje wycinek, a w pierwszej kolumnie znajduje się etykieta wycinka, a druga wartość wycinka. Na wykresie punktowym powinna być jednak tabela składająca się z 2 kolumn liczbowych, w których każdy wiersz to punkt, a 2 kolumny to wartości X i Y punktu. Przeczytaj dokumentację wykresu, aby dowiedzieć się, jakiego formatu danych wymaga.
Tablety DataTables i obiekty DataView
W języku JavaScript tabela danych na wykresie jest reprezentowana przez obiekt DataTable lub obiekt DataView. W niektórych przypadkach może być używany literał JavaScript lub wersja JSON tabeli DataTable, na przykład gdy dane są wysyłane przez internet przez źródło danych narzędzi do tworzenia wykresów lub jako możliwa wartość wejściowa dla ChartWrapper.
DataTable służy do utworzenia pierwotnej tabeli danych. DataView to klasa wygodna, która udostępnia widok obiektu DataTable tylko do odczytu i pozwala szybko ukrywać wiersze lub kolumny albo zmieniać ich kolejność bez modyfikowania połączonych, oryginalnych danych. Oto krótkie porównanie tych 2 klas:
| DataTable | DataView |
|---|---|
| Odczyt/zapis | Tylko do odczytu |
| Można utworzyć puste, a następnie wypełnić | Jest odwołaniem do istniejącego elementu DataTable. Nie można wypełniać danych od zera. Musi być utworzona w odniesieniu do istniejącego elementu DataTable. |
| Dane zajmują miejsce na dane. | Dane odwołują się do istniejącego elementu DataTable i nie zajmują miejsca. |
| Może dodawać, edytować i usuwać wiersze, kolumny i dane, a wszystkie zmiany są trwałe. | Może sortować i filtrować wiersze bez modyfikowania danych bazowych. Wiersze i kolumny mogą być ukryte i widoczne wielokrotnie. |
| Można sklonować | Może zwrócić wersję widoku danych DataTable |
| Jest danymi źródłowymi i nie zawiera odniesień | Aktualne odniesienie do elementu DataTable. Wszelkie zmiany w danych DataTable są natychmiast odzwierciedlane w widoku. |
| Może być przekazywana na wykres jako źródło danych | Może być przekazywana na wykres jako źródło danych |
| Nie obsługuje obliczonych kolumn | Obsługuje obliczone kolumny, czyli kolumny z wartością obliczanej na bieżąco przez łączenie innych kolumn lub manipulowanie innymi kolumnami. |
| Brak ukrywania wierszy lub kolumn | Może ukrywać lub wyświetlać wybrane kolumny |
Tworzenie i wypełnianie tabeli danych
Istnieje kilka różnych sposobów tworzenia i wypełniania tabeli DataTable:
- Utwórz nową tabelę DataTable, a następnie wywołaj addColumn()/addRows()/addRow()/setCell()
- arrayToDataTable()
- Inicjator literału JavaScript
- Wysyłanie zapytania do źródła danych
Pusta tabela danych + addColumn()/addRows()/addRow()/setCell()
Kroki:
- Utwórz nowe wystąpienie
DataTable - Dodaj kolumny
- Dodaj co najmniej 1 wiersz, opcjonalnie wypełniony danymi. Możesz dodać puste wiersze i wypełnić je później. Możesz też dodawać i usuwać wiersze dodatkowe, a także edytować wartości poszczególnych komórek.
Zalety:
- W każdej kolumnie możesz określić typ danych i etykietę.
- Sprawdza się w przypadku generowania tabeli w przeglądarce i mniej podatna na literówki niż metoda literału JSON.
Wady:
- Nie jest to tak przydatne jak tworzenie ciągu literału JSON przekazywanego do konstruktora DataTable podczas automatycznego generowania strony na serwerze WWW.
- Zależy od szybkości przeglądarki i może być wolniejsza niż ciągi znaków w formacie JSON z większymi tabelami (ponad 1000 komórek).
Przykłady:
Oto kilka przykładów tworzenia tej samej tabeli danych za pomocą różnych odmian tej metody:
// ------- Version 1------------
// Add rows + data at the same time
// -----------------------------
var data = new google.visualization.DataTable();
// Declare columns
data.addColumn('string', 'Employee Name');
data.addColumn('datetime', 'Hire Date');
// Add data.
data.addRows([
['Mike', {v:new Date(2008,1,28), f:'February 28, 2008'}], // Example of specifying actual and formatted values.
['Bob', new Date(2007,5,1)], // More typically this would be done using a
['Alice', new Date(2006,7,16)], // formatter.
['Frank', new Date(2007,11,28)],
['Floyd', new Date(2005,3,13)],
['Fritz', new Date(2011,6,1)]
]);
// ------- Version 2------------
// Add empty rows, then populate
// -----------------------------
var data = new google.visualization.DataTable();
// Add columns
data.addColumn('string', 'Employee Name');
data.addColumn('date', 'Start Date');
// Add empty rows
data.addRows(6);
data.setCell(0, 0, 'Mike');
data.setCell(0, 1, {v:new Date(2008,1,28), f:'February 28, 2008'});
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));
arrayToDataTable()
Ta funkcja pomocnicza tworzy i wypełnia pole DataTable za pomocą jednego wywołania.
Zalety:
- Bardzo prosty i czytelny kod wykonywany w przeglądarce.
- Możesz bezpośrednio określić typ danych w każdej kolumnie lub pozwolić Wykresom Google na ustalenie typu danych na podstawie przekazanych danych.
- Aby wyraźnie określić typ danych w kolumnie, określ obiekt w wierszu nagłówka za pomocą właściwości
type. - Aby Wykresy Google mogły ustalać typ, użyj ciągu znaków jako etykiety kolumny.
- Aby wyraźnie określić typ danych w kolumnie, określ obiekt w wierszu nagłówka za pomocą właściwości
Przykłady:
var data = google.visualization.arrayToDataTable([
['Employee Name', 'Salary'],
['Mike', {v:22500, f:'22,500'}], // Format as "22,500".
['Bob', 35000],
['Alice', 44000],
['Frank', 27000],
['Floyd', 92000],
['Fritz', 18500]
],
false); // 'false' means that the first row contains labels, not data.
var data = google.visualization.arrayToDataTable([
[ {label: 'Year', id: 'year'},
{label: 'Sales', id: 'Sales', type: 'number'}, // Use object notation to explicitly specify the data type.
{label: 'Expenses', id: 'Expenses', type: 'number'} ],
['2014', 1000, 400],
['2015', 1170, 460],
['2016', 660, 1120],
['2017', 1030, 540]]);
Inicjator literału JavaScript
Możesz przekazać obiekt literału JavaScript do konstruktora tabel, definiując schemat tabeli i opcjonalnie dane.
Zalety:
- Przydatny podczas generowania danych na serwerze WWW.
- Procesy przebiegają szybciej niż inne metody w przypadku większych tabel (ponad 1000 komórek)
Wady:
- Składnia jest trudna i podatna na literówki.
- Kod niezbyt czytelny.
- Wygląda na to, że jest podobny do formatu JSON, ale nie jest identyczny.
Przykład:
var data = new google.visualization.DataTable(
{
cols: [{id: 'task', label: 'Employee Name', type: 'string'},
{id: 'startDate', label: 'Start Date', type: 'date'}],
rows: [{c:[{v: 'Mike'}, {v: new Date(2008, 1, 28), f:'February 28, 2008'}]},
{c:[{v: 'Bob'}, {v: new Date(2007, 5, 1)}]},
{c:[{v: 'Alice'}, {v: new Date(2006, 7, 16)}]},
{c:[{v: 'Frank'}, {v: new Date(2007, 11, 28)}]},
{c:[{v: 'Floyd'}, {v: new Date(2005, 3, 13)}]},
{c:[{v: 'Fritz'}, {v: new Date(2011, 6, 1)}]}
]
}
)
Wysyłanie zapytania do źródła danych
Gdy wysyłasz zapytanie do źródła danych narzędzi Chart, pomyślną odpowiedzią jest instancja DataTable. Zwróconą tabelę DataTable można skopiować, zmodyfikować lub skopiować do obiektu DataView tak samo jak dowolną inną tabelę DataTable.
function drawVisualization() {
var query = new google.visualization.Query(
'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1');
// Apply query language statement.
query.setQuery('SELECT A,D WHERE D > 100 ORDER BY D');
// Send the query with a callback function.
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
visualization = new google.visualization.LineChart(document.getElementById('visualization'));
visualization.draw(data, {legend: 'bottom'});
}
dataTableToCsv()
Funkcja pomocnicza google.visualization.dataTableToCsv(dane) zwraca ciąg CSV z danymi z tabeli danych.
Dane wejściowe tej funkcji mogą mieć wartość DataTable lub DataView.
Wykorzystuje sformatowane wartości w komórkach. Etykiety kolumn są ignorowane.
Znaki specjalne, takie jak „,” i „\n”, można zmieniać, korzystając ze standardowych reguł zmiany znaczenia znaków CSV.
Ten kod wyświetli Ramanujan,1729
Gauss,5050
w konsoli JavaScript przeglądarki:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Name', 'Number'],
['Ramanujan', 1729],
['Gauss', 5050]
]);
var csv = google.visualization.dataTableToCsv(data);
console.log(csv);
}
</script>
</head>
</html>
Więcej informacji
- Tworzenie zapytania do źródła danych w narzędziach do tworzenia wykresów
- Składnia literału JavaScriptu DataTable
- Dokumentacja
DataTable - Dokumentacja
DataView - Dokumentacja
arrayToDataTable()