Tabele danych i widoki danych

Na tej stronie omawiamy reprezentację danych wewnętrznych przez wykresy, klasy DataTable i DataView używane do przekazywania danych na wykresie oraz różne sposoby tworzenia instancji i wypełniania DataTable.

Spis treści

  1. Sposób przedstawiania danych na wykresie
  2. Jakiego schematu tabeli używa mój wykres?
  3. Tabele danych i widoki danych
  4. Tworzenie i wypełnianie tabeli danych
    1. Utwórz nową tabelę danych, a następnie wywołaj addcolumn()/addRows()/addRow()/setCell()
    2. tablica_danych_tabeli()
    3. Inicjator literału JavaScript
    4. Wysyłanie zapytania dotyczącego źródła danych
  5. dataTableToCsv()
  6. Więcej informacji

Sposób przedstawiania danych na wykresie

Wszystkie wykresy przechowują dane w tabeli. Oto uproszczony obraz zapełnionej dwukolumnowej tabeli danych:

index: 0
type: string
label: 'Zadanie'

 index: 1
type: number
label: „Godziny dziennie”
'Praca' 11
„Zjedz” 2
Trasa dojazdu 2
Oglądanie telewizji 2
Sen 7

Dane są przechowywane w komórkach, do których odwołuje się kolumna (wiersz, kolumna), gdzie wiersz to indeks wiersza o wartości 0 , a kolumna to indeks kolumn o wartości 0 lub unikalny identyfikator, który możesz określić.

Poniżej znajdziesz bardziej szczegółową listę obsługiwanych elementów i właściwości tabeli. Szczegółowe informacje znajdziesz w sekcji Format parametru literału JavaScript w konstruktorze:

  • Tabela – tablica kolumn i wierszy oraz opcjonalna mapa z dowolnymi parami nazwa-wartość, które można przypisać. Właściwości na poziomie tabeli nie są obecnie używane przez wykresy.
  • Kolumny – każda kolumna obsługuje wymagany typ danych oraz opcjonalną etykietę ciągu, identyfikator, wzór i mapę dowolnych właściwości nazwy/wartości. Etykieta to łatwy w użyciu ciąg znaków, który można wyświetlić na wykresie. Identyfikator to opcjonalny identyfikator, który może zastąpić indeks kolumn. W kodzie można odwoływać się do kodu, używając indeksu opartego na zerowej wartości lub opcjonalnego identyfikatora. Listę obsługiwanych typów danych znajdziesz w sekcji DataTable.addColumn().
  • Wiersze – wiersz to tablica komórek oraz opcjonalna mapa z dowolnymi parami nazwa/wartość, które możesz przypisać.
  • Komórki – każda komórka to rzeczywista wartość typu kolumny oraz opcjonalna, wpisana w formacie ciągu wersja wartości, którą podajesz. Na przykład: w kolumnie liczbowej może być przypisana wartość 7, a sformatowana wartość „7”. Jeśli podana wartość ma wartość sformatowaną, na wykresie zostanie użyta rzeczywista wartość obliczeniowa i renderowania, ale w odpowiednich sytuacjach może się ona pojawić, gdy na przykład użytkownik najedzie na punkt. Każda komórka ma też opcjonalną mapę dowolnych par nazwa/wartość.

Jakiego schematu tabeli używa mój wykres?

Różne wykresy wykorzystują tabele w różnych formatach – na przykład wykres kołowy potrzebuje tabeli z dwoma kolumnami oraz kolumnami liczbowymi, w których każdy wiersz zawiera wycinek, każda z nich to etykieta wycinka, a druga – wartość wycinka. Wykres punktowy oczekuje jednak tabeli składającej się z 2 kolumn liczbowych, przy czym każdy wiersz reprezentuje punkt, a 2 kolumny to wartości X i Y punktu. Zapoznaj się z dokumentacją wykresu, aby dowiedzieć się, jakiego formatu danych wymaga.

Tabele danych i widoki danych

Tabela danych wykresu jest reprezentowana w pliku JavaScript przez obiekt DataTable lub obiekt DataView. W niektórych przypadkach możesz zobaczyć dosłowną wersję JavaScript lub wersję JSON tabeli DataTable, np. gdy dane są wysyłane przez internet przez źródło danych Grafu wiedzy lub jako wartość wejściową ChartWrapper.

DataTable jest używany do utworzenia pierwotnej tabeli danych. DataView to klasa wygody, która zapewnia tylko dostęp do odczytu obiektu DataTable. Umożliwia on szybkie ukrycie wierszy lub kolumn bądź zmianę ich kolejności bez modyfikowania oryginalnych, połączonych danych. Krótkie porównanie tych zajęć:

Tabela danych Widok danych
Do odczytu i zapisu Tylko do odczytu
Można utworzyć pustą, a następnie wypełnić Odnosi się do istniejącego elementu DataTable. Nie można wypełnić pola od zera; musi być utworzona za pomocą odwołania do istniejącego elementu DataTable.
Dane zajmują miejsce. Dane to odwołania do istniejących elementów DataTable, które nie zajmują miejsca.
Może dodawać, edytować i usuwać wiersze, kolumny i dane, a wszystkie zmiany są trwałe. Możesz sortować lub filtrować wiersze bez modyfikowania danych bazowych. Wiersze i kolumny można ukrywać i wielokrotnie odkrywać.
Można sklonować Zwraca widok DataTable w wersji
Dane źródłowe; nie zawiera odniesień Aktualne odwołanie do DataTable. Wszelkie zmiany w danych DataTable są natychmiast odzwierciedlane w widoku.
Może być przekazywany na wykresie jako źródło danych Może być przekazywany na wykresie jako źródło danych
Nie obsługuje obliczonych kolumn Obsługuje obliczone kolumny, które mają wartości obliczane w czasie rzeczywistym przez łączenie lub manipulowanie innymi kolumnami.
Brak ukrywania wierszy i 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 danych:

Pusta tabela danych + addColumn()/addRows()/addRow()/setCell()

Kroki:

  1. Utwórz nową instancję DataTable
  2. Dodaj kolumny
  3. Dodaj co najmniej 1 wiersz, opcjonalnie wypełniony danymi. Możesz dodać puste wiersze i wstawić je później. Możesz też dodawać i usuwać wiersze oraz edytować wartości komórek pojedynczo.

Zalety:

  • Możesz określić typ danych i etykietę każdej kolumny.
  • Dobre rozwiązanie do generowania tabeli w przeglądarce i mniej podatne na literówki w przypadku metody literalnej JSON.

Wady:

  • Nie jest to tak przydatne jak utworzenie dosłownego ciągu znaków JSON do przekazania na konstruktor DataTable podczas automatycznego generowania strony na serwerze WWW.
  • Zależnie od szybkości przeglądarki może być wolniejsza niż ciąg literału JSON z większymi tabelami (ponad 1000 komórek).

Przykłady:

Oto kilka przykładów tworzenia tej samej tabeli danych przy użyciu 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));

tablicaToDataTable()

Ta funkcja pomocnicza tworzy i wypełnia element DataTable za pomocą pojedynczego wywołania.

Zalety:

  • Bardzo prosty i czytelny kod wykonywany w przeglądarce.
  • Możesz wyraźnie określić typ danych w każdej kolumnie lub pozwolić wykresom Google na określenie typu danych na podstawie przekazywanych danych.
    • Aby wyraźnie określić typ danych kolumny, określ obiekt w wierszu nagłówka za pomocą właściwości type.
    • Aby umożliwić wykresom Google ustalenie typu, użyj ciągu znaków dla etykiety kolumny.

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

Do konstruktora tabeli możesz przekazywać obiekt literału JavaScript, definiując schemat tabeli i opcjonalnie dane.

Zalety:

  • Przydatny podczas generowania danych na serwerze WWW.
  • Przetwarzanie przebiega szybciej niż inne metody w przypadku większych tabel (około 1000 komórek)

Wady:

  • Składnia jest trudna do poprawnego określenia i zawiera błędną pisownię.
  • Kod nieczytelny.
  • Kuszące, ale nieidentyczne, dla pliku JSON.

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 dotyczącego źródła danych

Gdy wysyłasz zapytanie do źródła danych narzędzi Grafu wiedzy, pomyślna odpowiedź to instancja DataTable. Zwrócona tabela danych może zostać skopiowana, zmodyfikowana lub skopiowana do widoku danych tak samo jak dowolna inna tabela.

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ć postać DataTable lub DataView.

Wykorzystuje sformatowane wartości komórek. Laboratorium kolumny jest ignorowane.

Znaki specjalne, takie jak „,” i „\n”, są objęte standardowymi regułami zmiany znaczenia w pliku CSV.

W konsoli JavaScriptu Twojej przeglądarki wyświetli się ten kod:

Ramanujan,1729
Gauss,5050

:

<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