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

Wykres Vega

Przegląd
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 VigaVisual Grammar, która jest deklaratywnym językiem do tworzenia, zapisywania i udostępniania interaktywnych projektów wizualizacji. Vega pozwala opisać wygląd i interaktywne zachowanie wizualizacji w formacie JSON, a także generować widoki danych w internecie za pomocą obiektów Canvas lub SVG.

Podczas tworzenia wykresu Vega musisz w swoich opcjach zawrzeć specyfikację tworzenia wykresu w gramatyce wizualizacji Vega. Poniżej znajdziesz kilka przykładów takich specyfikacji, a kilka przykładów znajdziesz na stronie VegaChart Example.

Uwaga: chociaż wykres Google Charts Vega może rysować dowolny wykres, który można określić za pomocą specyfikacji Vega JSON (w tym wszystkie elementy w przykładowej galerii), 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 Vega, który rysuje wykres słupkowy. (Zapoznaj się z pierwotnym przykładem, szczegółowym samouczkiem i wykresem słupkowym w edytorze wykresów Vega).

Chociaż jest to kolejny sposób tworzenia wykresu słupkowego w Grafach Google, planujemy zintegrować wszystkie funkcje innych wykresów słupkowych i kolumn w ramach nowej implementacji na podstawie tego wykresu Vega.

W tym przykładzie opcja „data” jest zastąpiona poniższą, która używa „tabeli danych” podanej przez wywołanie rysowania jako „źródła” innego obiektu danych o nazwie „tabela”, a „tabela” jest używana w pozostałej specyfikacji Vega.

  '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 bardzo podobny sposób jak w przypadku innych wykresów Google, używając DataTable (lub DataView). Główną różnicą jest to, że niezależnie od kolejności użycia kolumn w celu określenia, jak są używane, VegaWykres korzysta z identyfikatora każdej kolumny i jest taki sam jak oczekiwany w przypadku określonej wizualizacji Vega. Na przykład poniższą tabelę danych utworzono z kolumnami o identyfikatorach 'category' i 'amount'. Te same identyfikatory są używane w opcji „vega” do odwołania 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);

Dzięki danym wbudowanym 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 do usługi Vega Graph można przekazywać tylko jedną taką tabelę, podczas gdy niektóre wykresy Vega wymagają więcej niż 1 tabeli danych. W przyszłej wersji Listy przebojów Google wprowadzimy to ograniczenie.

Tymczasem możesz określić w polu 'vega' 'data' wszelkie dodatkowe dane, których chcesz używać – przez wbudowanie go lub wczytanie z adresu URL. Poniżej znajdziesz przykłady użycia obu tych metod.

Opcje konfiguracji

Nazwa
obszarGraficzny	Obiekt z użytkownikami do konfigurowania położenia i rozmiaru obszaru wykresu (tam, gdzie rysowany jest sam wykres, z wyłączeniem osi i legend). Obsługiwane są 2 formaty: liczba lub liczba, po której następuje %. Prosta liczba to wartość w pikselach. Liczba, po której następuje %, to wartość procentowa. Przykład: `chartArea:{left:20,top:0,width:'50%',height:'75%'}` Typ: obiekt Domyślne: null
wykresareny.dol	Odległość, w jakiej należy narysować wykres od dolnej krawędzi. Typ: liczba lub ciąg Ustawienie domyślne: automatyczne
wykresArea.left	Odległość, jaka ma być używana do rysowania wykresu od lewej krawędzi. Typ: liczba lub ciąg Ustawienie domyślne: automatyczne
wykresArea.right	Odległość, jaka ma być używana do rysowania wykresu od prawej krawędzi. Typ: liczba lub ciąg Ustawienie domyślne: automatyczne
wykresArea.top	Odległość, w jakiej znajduje się wykres od górnej krawędzi. Typ: liczba lub ciąg Ustawienie domyślne: automatyczne
chartArea.width	Szerokość obszaru wykresu. Typ: liczba lub ciąg Ustawienie domyślne: automatyczne
wykresArea.height	Wysokość obszaru wykresu. Typ: liczba lub ciąg Ustawienie domyślne: automatyczne
wysokość	Wysokość wykresu w pikselach. Typ: liczba Domyślna: wysokość elementu, który go zawiera.
szerokość	Szerokość wykresu w pikselach. Typ: liczba Domyślna – szerokość elementu, który zawiera.

Metody

Metoda
`draw(data, options)`	Rysuje wykres. Wykres akceptuje dalsze wywołania metody dopiero po wywołaniu zdarzenia `ready`. `Extended description`, Typ zwrotu: brak
`getAction(actionID)`	Zwraca obiekt działania etykietki z wymaganym parametrem `actionID`. Typ zwrotu: obiekt
`getBoundingBox(id)`	Zwraca obiekt zawierający lewą, górną, szerokość i wysokość elementu wykresu `id`. Format elementu `id` nie został jeszcze udokumentowany (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 klinowej do wykresu kołowego `cli.getBoundingBox('slice#4')` Ramka ograniczająca dane z wykresu pionowego (np. kolumny): `cli.getBoundingBox('vAxis#0#gridline')` Ramka ograniczająca danych na wykresie poziomym (np. słupkowym): `cli.getBoundingBox('hAxis#0#gridline')` Wartości odnoszą się do kontenera wykresu. Wywołuj je po narysowaniu wykresu. Typ zwrotu: obiekt
`getChartAreaBoundingBox()`	Zwraca obiekt zawierający lewą, górną, szerokość i wysokość zawartości wykresu (tzn. z wyłączeniem etykiet i legend): `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. Typ zwrotu: obiekt
`getChartLayoutInterface()`	Zwraca obiekt zawierający informacje o umieszczonym na ekranie miejscu na wykresie i jego elementach. W zwróconym obiekcie można wywołać te metody: `getBoundingBox` `getChartAreaBoundingBox` `getHAxisValue` `getVAxisValue` `getXLocation` `getYLocation` Wywołuj je po narysowaniu wykresu. Typ zwrotu: obiekt
`getHAxisValue(xPosition, optional_axis_index)`	Zwraca poziomą wartość danych w miejscu `xPosition`, czyli w pikselach odsunięcie od lewej krawędzi kontenera wykresu. Może być ujemny. Przykład: `chart.getChartLayoutInterface().getHAxisValue(400)`. Wywołuj je po narysowaniu wykresu. Typ zwrotu: numer
`getImageURI()`	Zwraca wykres zserializowany jako identyfikator URI obrazu. Wywołuj je po narysowaniu wykresu. Patrz Drukowanie wykresów PNG. Typ zwrotu: ciąg znaków
`getSelection()`	Zwraca tablicę wybranych elementów wykresu. Na tym wykresie w danym momencie możesz wybrać tylko 1 element. `Extended description`. Typ zwrotu: tablica elementów wyboru.
`getVAxisValue(yPosition, optional_axis_index)`	Zwraca pionową wartość danych w miejscu `yPosition`, czyli w pikselach odsunięcia od górnej krawędzi kontenera wykresu. Może być ujemny. Przykład: `chart.getChartLayoutInterface().getVAxisValue(300)`. Wywołuj je po narysowaniu wykresu. Typ zwrotu: numer
`getXLocation(dataValue, optional_axis_index)`	Zwraca współrzędną x piksela `dataValue` względem lewej krawędzi kontenera wykresu. Przykład: `chart.getChartLayoutInterface().getXLocation(400)`. Wywołuj je po narysowaniu wykresu. Typ zwrotu: numer
`getYLocation(dataValue, optional_axis_index)`	Zwraca współrzędną Y piksela `dataValue` względem górnej krawędzi kontenera. Przykład: `chart.getChartLayoutInterface().getYLocation(300)`. Wywołuj je po narysowaniu wykresu. Typ zwrotu: numer
`removeAction(actionID)`	Usuwa z wykresu etykietkę z żądaniem `actionID`. Typ zwrotu: `none`
`setAction(action)`	Ustawia działanie etykietki do wykonania, gdy użytkownik kliknie tekst działania. 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 pojawić się w etykiecie działania, oraz `action`, funkcję, która powinna być uruchamiana, gdy użytkownik kliknie tekst działania. Przed wywołaniem metody `draw()` wykresu należy ustawić dowolne i wszystkie działania dotyczące etykietek. Rozszerzony opis. Typ zwrotu: `none`
`setSelection()`	Zaznacza określone elementy wykresu. Anuluje poprzedni wybór. Na tym wykresie możesz wybrać tylko jeden element naraz. `Extended description`. Typ zwrotu: brak
`clearChart()`	Czyści wykres i usuwa wszystkie przydzielone zasoby. Typ zwrotu: brak

Zdarzenia

Więcej informacji o korzystaniu z tych zdarzeń znajdziesz w artykułach Podstawowe funkcje interaktywne, 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. Można jej użyć do określenia, kiedy kliknięty jest tytuł, elementy danych, wpisy legendy, osie, linie siatki lub etykiety. Właściwości: targetID
`error`	Uruchamiane, gdy podczas próby renderowania wykresu wystąpi błąd. Właściwości: id, message
`legendpagination`	Uruchamiane, gdy użytkownik kliknie legendę podziału na strony. Przekazuje aktualny indeks stron oparty na zerowej legendzie i łączną liczbę stron. Właściwości: currentPageIndex, totalPages
`onmouseover`	Uruchamiane, gdy użytkownik najedzie kursorem na jednostkę wizualną. Zwraca indeksy wierszy i kolumn odpowiedniego elementu tabeli danych. Właściwości: wiersz, kolumna.
`onmouseout`	Uruchamiane, gdy użytkownik odsunie kursor od jednostki wizualnej. Zwraca indeksy wierszy i kolumn odpowiedniego elementu tabeli danych. Właściwości: wiersz, kolumna.
`ready`	Wykres jest gotowy do wywołań metod zewnętrznych. Jeśli chcesz korzystać z wykresu i metod wywoływania po narysowaniu, musisz skonfigurować odbiornik tego zdarzenia przed wywołaniem metody `draw` i wywołanie ich dopiero po uruchomieniu 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 do żadnego serwera.