Omówienie
VegaChart to jedna z wielu możliwych wizualizacji, które można utworzyć za pomocą gramatyki wizualizacji Vega – języka deklaratywnego do tworzenia, zapisywania i udostępniania projektów wizualizacji interaktywnych. Dzięki Vega możesz opisać wygląd i interaktywność wizualizacji w formacie JSON oraz generować widoki internetowe za pomocą Canvas lub SVG.
Rysując wykres VegaChart, musisz uwzględnić w opcjach specyfikację dotyczącą sposobu tworzenia wykresu w gramatyce wizualizacji Vega. Poniżej znajduje się kilka przykładów takich specyfikacji, a więcej przykładów znajdziesz na stronie Przykłady VegaChart.
Uwaga: chociaż wykres VegaChart w Google Charts umożliwia tworzenie dowolnego wykresu Vega, który można określić za pomocą specyfikacji JSON Vega (w tym całej zawartości Galerii przykładów), dodatkowe funkcje wymagające wywołań interfejsu Vega API nie są jeszcze dostępne.
Prosty przykład: wykres słupkowy
Oto prosty przykład wykresu słupkowego VegaChart. (Zobacz pierwotny przykład, szczegółowy samouczek i wykres słupkowy w edytorze wykresów Vega).
Chociaż jest to kolejny sposób tworzenia wykresu słupkowego w Wykresach Google, planujemy zintegrować wszystkie funkcje innych wykresów słupkowych i kolumnowych w nowej implementacji opartej na tym wykresie.
W tym przykładzie opcja „data” została zastąpiona następującą wartością, w której „datatable” (tabela danych) pochodzi z wywołania metody rysowania jako „źródło” dla innego obiektu danych o nazwie „table”, a w pozostałej części specyfikacji Vega używana jest opcja „table”.
'data': [{'name': 'table', 'source': 'datatable'}],
<html>
<head>
<script src='https://www.gstatic.com/charts/loader.js'></script>
<script>
google.charts.load('upcoming', {'packages': ['vegachart']}).then(drawChart);
function drawChart() {
const dataTable = new google.visualization.DataTable();
dataTable.addColumn({type: 'string', 'id': 'category'});
dataTable.addColumn({type: 'number', 'id': 'amount'});
dataTable.addRows([
['A', 28],
['B', 55],
['C', 43],
['D', 91],
['E', 81],
['F', 53],
['G', 19],
['H', 87],
]);
const options = {
"vega": {
"$schema": "https://vega.github.io/schema/vega/v4.json",
"width": 500,
"height": 200,
"padding": 5,
'data': [{'name': 'table', 'source': 'datatable'}],
"signals": [
{
"name": "tooltip",
"value": {},
"on": [
{"events": "rect:mouseover", "update": "datum"},
{"events": "rect:mouseout", "update": "{}"}
]
}
],
"scales": [
{
"name": "xscale",
"type": "band",
"domain": {"data": "table", "field": "category"},
"range": "width",
"padding": 0.05,
"round": true
},
{
"name": "yscale",
"domain": {"data": "table", "field": "amount"},
"nice": true,
"range": "height"
}
],
"axes": [
{ "orient": "bottom", "scale": "xscale" },
{ "orient": "left", "scale": "yscale" }
],
"marks": [
{
"type": "rect",
"from": {"data":"table"},
"encode": {
"enter": {
"x": {"scale": "xscale", "field": "category"},
"width": {"scale": "xscale", "band": 1},
"y": {"scale": "yscale", "field": "amount"},
"y2": {"scale": "yscale", "value": 0}
},
"update": {
"fill": {"value": "steelblue"}
},
"hover": {
"fill": {"value": "red"}
}
}
},
{
"type": "text",
"encode": {
"enter": {
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#333"}
},
"update": {
"x": {"scale": "xscale", "signal": "tooltip.category", "band": 0.5},
"y": {"scale": "yscale", "signal": "tooltip.amount", "offset": -2},
"text": {"signal": "tooltip.amount"},
"fillOpacity": [
{"test": "datum === tooltip", "value": 0},
{"value": 1}
]
}
}
}
]
}
};
const chart = new google.visualization.VegaChart(document.getElementById('chart-div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id="chart-div" style="width: 700px; height: 250px;"></div>
</body>
</html>
Wczytuję
Nazwa pakietu google.charts.load to "vegachart".
google.charts.load("current", {packages: ["vegachart"]});
Nazwa klasy wizualizacji to google.visualization.VegaChart.
var visualization = new google.visualization.VegaChart(container);
Format danych
Dane można przekazywać do VegaChart w sposób bardzo podobny do innych wykresów Google za pomocą DataTable (lub DataView). Główna różnica polega na tym, że sposób ich użycia nie jest uzależniony od kolejności kolumn, ponieważ identyfikator każdej kolumny jest taki sam, jak w przypadku określonej wizualizacji Vega.
Na przykład poniższa tabela DataTable została utworzona z kolumnami, które zawierają identyfikatory 'category' i 'amount'. Te same identyfikatory są używane w opcji „vega” do odwoływania się do tych kolumn.
const dataTable = new google.visualization.DataTable();
dataTable.addColumn({type: 'string', 'id': 'category'});
dataTable.addColumn({type: 'number', 'id': 'amount'});
dataTable.addRows([
['A', 28],
['B', 55],
['C', 43],
]);
const options = {
'vega': {
...
// Here we create the Vega data object named 'datatable',
// which will be passed in via the draw() call with a DataTable.
'data': {'name': 'datatable'},
'scales': [
{
'name': 'yscale',
// Here is an example of how to use the 'amount' field from 'datatable'.
'domain': {'data': 'datatable', 'field': 'amount'},
}
]
}
};
const chart = new google.visualization.VegaChart(
document.getElementById('chart-div'));
chart.draw(dataTable, options);
// A DataTable is required, but it may be empty.
const dataTable = new google.visualization.DataTable();
const options = {
'vega': {
// Here the data is specified inline in the Vega specification.
"data": [
{
"name": "table",
"values": [
{"category": "A", "amount": 28},
{"category": "B", "amount": 55},
{"category": "C", "amount": 43},
]
}
],
'scales': [
{
'name': 'yscale',
// Here is how Vega normally uses the 'amount' field from 'table'.
"domain": {"data": "table", "field": "category"},
}
]
}
};
const chart = new google.visualization.VegaChart(
document.getElementById('chart-div'));
chart.draw(dataTable, options);
Jednak w ten sposób można przekazać do VegaChart tylko jedną taką tabelę danych, natomiast niektóre wykresy Vega wymagają więcej niż 1 tabeli danych. Rozwiążemy to ograniczenie w przyszłej wersji Wykresów Google.
Dodatkowe dane, których potrzebujesz, możesz określić w opcji 'vega' 'data'. Wystarczy, że umieścisz ją w treści lub wczytasz z adresu URL.
Poniżej znajdziesz ich przykłady.
Opcje konfiguracji
| Nazwa | |
|---|---|
| chartArea |
Obiekt z elementami służącymi do konfigurowania miejsca docelowego i rozmiaru obszaru wykresu (gdzie sam wykres jest rysowany, z wyłączeniem osi i legend). Obsługiwane są dwa formaty: liczba lub liczba, po której następuje znak %. Prosta liczba to wartość w pikselach, po której następuje znak %, a po nim wartość procentowa. Przykład: Typ: obiekt
Wartość domyślna:null
|
| chartArea.bottom |
Odległość od dolnej krawędzi, która ma zostać narysowana na wykresie. Typ: liczba lub ciąg znaków.
Domyślnie automatycznie
|
| chartArea.left |
Jak daleko od lewej krawędzi należy narysować wykres. Typ: liczba lub ciąg znaków.
Domyślnie automatycznie
|
| chartArea.right |
Odległość wykresu od prawej krawędzi. Typ: liczba lub ciąg znaków.
Domyślnie automatycznie
|
| chartArea.top |
Odległość wykresu od górnej krawędzi. Typ: liczba lub ciąg znaków.
Domyślnie automatycznie
|
| chartArea.width |
Szerokość obszaru wykresu. Typ: liczba lub ciąg znaków.
Domyślnie automatycznie
|
| chartArea.height |
Wysokość obszaru wykresu. Typ: liczba lub ciąg znaków.
Domyślnie automatycznie
|
| wysokość |
Wysokość wykresu w pikselach. Typ: liczba
Domyślna: wysokość elementu nadrzędnego.
|
| szerokość |
Szerokość wykresu w pikselach. Typ: liczba
Domyślna: szerokość elementu nadrzędnego.
|
Metody
| Metoda | |
|---|---|
draw(data, options) |
Rysuje wykres. Wykres akceptuje kolejne wywołania metod dopiero po wywołaniu zdarzenia Return Type: brak
|
getAction(actionID) |
Zwraca obiekt działania etykietki z żądanym obiektem Return Type: (Typ zwracania): obiekt
|
getBoundingBox(id) |
Zwraca obiekt zawierający lewo, górę, szerokość i wysokość elementu wykresu
Wartości odnoszą się do kontenera wykresu. Wywołuj je po narysowaniu wykresu. Return Type: (Typ zwracania): obiekt
|
getChartAreaBoundingBox() |
Zwraca obiekt zawierający lewo, górę, szerokość i wysokość zawartości wykresu (tj. bez etykiet i legendy):
Wartości odnoszą się do kontenera wykresu. Wywołuj je po narysowaniu wykresu. Return Type: (Typ zwracania): obiekt
|
getChartLayoutInterface() |
Zwraca obiekt zawierający informacje o pozycji na ekranie wykresu i jego elementów. W przypadku zwróconego obiektu można wywołać te metody:
Wywołuj je po narysowaniu wykresu. Return Type: (Typ zwracania): obiekt
|
getHAxisValue(xPosition, optional_axis_index) |
Zwraca poziomą wartość danych w punkcie Przykład: Wywołuj je po narysowaniu wykresu. Return Type: (Typ zwrotu): liczba
|
getImageURI() |
Zwraca wykres zserializowany jako identyfikator URI obrazu. Wywołuj je po narysowaniu wykresu. Zobacz Drukowanie wykresów PNG. Return Type: (Typ zwracania): ciąg znaków
|
getSelection() |
Zwraca tablicę wybranych elementów wykresu.
Na tym wykresie w danym momencie można wybrać tylko 1 element.
Return Type: tablica elementów zaznaczenia.
|
getVAxisValue(yPosition, optional_axis_index) |
Zwraca pionową wartość danych przy Przykład: Wywołuj je po narysowaniu wykresu. Return Type: (Typ zwrotu): liczba
|
getXLocation(dataValue, optional_axis_index) |
Zwraca współrzędną X piksela dla elementu Przykład: Wywołuj je po narysowaniu wykresu. Return Type: (Typ zwrotu): liczba
|
getYLocation(dataValue, optional_axis_index) |
Zwraca współrzędną Y piksela ( Przykład: Wywołuj je po narysowaniu wykresu. Return Type: (Typ zwrotu): liczba
|
removeAction(actionID) |
Usuwa z wykresu działanie etykietki z żądanym elementem Typ zwrotu:
none |
setAction(action) |
Ustawia działanie etykietki, które ma być wykonywane po kliknięciu tekstu działania przez użytkownika.
Metoda
Przed wywołaniem metody Typ zwrotu:
none |
setSelection() |
Wybiera określone elementy wykresu. Anuluje wcześniejszy wybór.
Na tym wykresie można wybrać tylko 1 element naraz.
Return Type: brak
|
clearChart() |
Czyści wykres i zwalnia wszystkie przydzielone Ci zasoby. Return Type: brak
|
Zdarzenia
Więcej informacji o korzystaniu z tych zdarzeń znajdziesz w artykułach Podstawowa interaktywność, Obsługa zdarzeń i Uruchamianie zdarzeń.
| Nazwa | |
|---|---|
animationfinish |
Uruchamiane po zakończeniu animacji przejścia. Właściwości: brak
|
click |
Uruchamiane, gdy użytkownik kliknie wykres. Pozwala określić, kiedy klikane są tytuł, elementy danych, wpisy legendy, osie, linie siatki lub etykiety. Właściwości: targetID
|
error |
Uruchamiane, gdy podczas próby wyrenderowania wykresu wystąpi błąd. Właściwości: identyfikator, komunikat
|
legendpagination |
Uruchamiane, gdy użytkownik kliknie strzałki podziału na strony w legendzie. Zwraca bieżący indeks stron legendy liczony od zera oraz łączną liczbę stron. Właściwości: currentPageIndex, totalPages
|
onmouseover |
Uruchamiane, gdy użytkownik najedzie kursorem na element wizualny. Przekazuje z powrotem indeksy wierszy i kolumn odpowiedniego elementu tabeli danych. Właściwości: wiersz, kolumna
|
onmouseout |
Uruchamiane, gdy użytkownik najedzie kursorem poza obiekt wizualny. Przekazuje z powrotem indeksy wierszy i kolumn odpowiedniego elementu tabeli danych. Właściwości: wiersz, kolumna
|
ready |
Wykres jest gotowy do obsługi wywołań metod zewnętrznych. Jeśli chcesz korzystać z wykresu i metod wywołań po jego narysowaniu, skonfiguruj detektor tego zdarzenia przed wywołaniem metody Właściwości: brak
|
select |
Uruchamiane, gdy użytkownik kliknie element wizualny. Aby dowiedzieć się, co zostało wybrane, zadzwoń pod numer Właściwości: brak
|
Zasady dotyczące danych
Cały kod i dane są przetwarzane i renderowane w przeglądarce. Żadne dane nie są wysyłane na żaden serwer.