Ta strona została przetłumaczona przez Cloud Translation API.

Wykres Vega

Overview
Prosty przykład
Wczytuję
Format danych
Opcje konfiguracji
Metody
Zdarzenia
Zasady dotyczące danych

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'}],

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

<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.

Z tabelą danych

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

Z danymi wbudowanymi Vega

        // 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: `chartArea:{left:20,top:0,width:'50%',height:'75%'}` 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 `ready`. `Extended description`. Return Type: brak
`getAction(actionID)`	Zwraca obiekt działania etykietki z żądanym obiektem `actionID`. Return Type: (Typ zwracania): obiekt
`getBoundingBox(id)`	Zwraca obiekt zawierający lewo, górę, szerokość i wysokość elementu wykresu `id`. Format zapisu `id` nie jest jeszcze udokumentowany (są to wartości zwracane przez moduły obsługi zdarzeń), ale oto kilka przykładów: `var cli = chart.getChartLayoutInterface();` Wysokość obszaru wykresu `cli.getBoundingBox('chartarea').height` Szerokość trzeciego słupka w pierwszej serii wykresu słupkowego lub kolumnowego `cli.getBoundingBox('bar#0#2').width` Ramka ograniczająca piątej podkładki na wykresie kołowym `cli.getBoundingBox('slice#4')` Ramka ograniczająca dane wykresu pionowego (np. kolumnowego): `cli.getBoundingBox('vAxis#0#gridline')` Ramka ograniczająca dane wykresu poziomego (np. słupkowego): `cli.getBoundingBox('hAxis#0#gridline')` 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): `var cli = chart.getChartLayoutInterface();` `cli.getChartAreaBoundingBox().left` `cli.getChartAreaBoundingBox().top` `cli.getChartAreaBoundingBox().height` `cli.getChartAreaBoundingBox().width` 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: `getBoundingBox` `getChartAreaBoundingBox` `getHAxisValue` `getVAxisValue` `getXLocation` `getYLocation` Wywołuj je po narysowaniu wykresu. Return Type: (Typ zwracania): obiekt
`getHAxisValue(xPosition, optional_axis_index)`	Zwraca poziomą wartość danych w punkcie `xPosition`, czyli odsunięcie od lewej krawędzi kontenera wykresu w pikselach. Może być ujemna. Przykład: `chart.getChartLayoutInterface().getHAxisValue(400)`. 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. `Extended description` Return Type: tablica elementów zaznaczenia.
`getVAxisValue(yPosition, optional_axis_index)`	Zwraca pionową wartość danych przy `yPosition`, czyli przesunięcie w pikselach od górnej krawędzi kontenera wykresu. Może być ujemna. Przykład: `chart.getChartLayoutInterface().getVAxisValue(300)`. Wywołuj je po narysowaniu wykresu. Return Type: (Typ zwrotu): liczba
`getXLocation(dataValue, optional_axis_index)`	Zwraca współrzędną X piksela dla elementu `dataValue` względem lewej krawędzi kontenera wykresu. Przykład: `chart.getChartLayoutInterface().getXLocation(400)`. Wywołuj je po narysowaniu wykresu. Return Type: (Typ zwrotu): liczba
`getYLocation(dataValue, optional_axis_index)`	Zwraca współrzędną Y piksela (`dataValue`) względem górnej krawędzi kontenera wykresu. Przykład: `chart.getChartLayoutInterface().getYLocation(300)`. Wywołuj je po narysowaniu wykresu. Return Type: (Typ zwrotu): liczba
`removeAction(actionID)`	Usuwa z wykresu działanie etykietki z żądanym elementem `actionID`. Typ zwrotu: `none`
`setAction(action)`	Ustawia działanie etykietki, które ma być wykonywane po kliknięciu tekstu działania przez użytkownika. 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ą. Rozszerzony opis Typ zwrotu: `none`
`setSelection()`	Wybiera określone elementy wykresu. Anuluje wcześniejszy wybór. Na tym wykresie można wybrać tylko 1 element naraz. `Extended description` 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 `draw` i wywołaj je dopiero po wywołaniu zdarzenia. Właściwości: brak
`select`	Uruchamiane, gdy użytkownik kliknie element wizualny. Aby dowiedzieć się, co zostało wybrane, zadzwoń pod numer `getSelection()`. 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.