Эта страница переведена с помощью Cloud Translation API.

VegaChart

Обзор
Простой пример
Загрузка
Формат данных
Параметры конфигурации
Методы
События
Политика данных

Обзор

VegaChart — это одна из многих возможных визуализаций, которые можно создать с помощью грамматики Vega Visualization Grammar , которая представляет собой декларативный язык для создания, сохранения и совместного использования интерактивных проектов визуализации. С помощью Vega вы можете описывать внешний вид и интерактивное поведение визуализации в формате JSON, а также создавать веб-представления с помощью Canvas или SVG.

При рисовании VegaChart вы должны включить в параметры спецификацию того, как построить диаграмму в грамматике визуализации Vega. Несколько примеров таких спецификаций приведены ниже, а еще несколько примеров можно найти на странице примеров VegaChart .

Примечание. В то время как Google Charts VegaChart может рисовать любые диаграммы Vega, которые вы можете указать с помощью спецификации Vega JSON (включая все в галерее примеров ), дополнительные функции, требующие вызовов Vega API , пока недоступны.

Простой пример, гистограмма

Вот простой пример VegaChart, который рисует гистограмму. (См. исходный пример , подробный туториал и гистограмму в редакторе диаграмм Vega .)

Хотя это еще один способ создания гистограммы в Google Charts, мы планируем интегрировать все функции других гистограмм и столбцов в новую реализацию, основанную на VegaChart.

Обратите внимание, что в этом примере опция «данные» заменена следующей, которая использует «таблицу данных», предоставленную вызовом отрисовки, в качестве «источника» для другого объекта данных, называемого «таблица», а «таблица» используется в оставшаяся часть спецификации Vega.

  'data': [{'name': 'table', 'source': 'datatable'}],

<span class="notranslate"><input type='submit' value="Кодируйте сами на JSFiddle" class='button'/><input type='hidden' name='title' value='VegaChart Bar Chart'/> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart-div" style="width: 700px; height: 250px;"></div> 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); }<input type='hidden' name='css' value=''/><input type='hidden' name='description' value='An example of a Google VegaChart Bar Chart.'/><input type='hidden' name='dtd' value='html 5'/><input type='hidden' name='wrap' value='b'/></span>

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

Загрузка

Имя пакета google.charts.load — "vegachart" .

google.charts.load("current", {packages: ["vegachart"]});

Имя класса визуализации — google.visualization.VegaChart .

var visualization = new google.visualization.VegaChart(container);

Формат данных

Данные можно передавать в VegaChart так же, как и в другие Google Charts, используя DataTable (или DataView). Основное отличие состоит в том, что вместо того, чтобы полагаться на порядок столбцов для определения того, как они используются, VegaChart полагается на то, что идентификатор каждого столбца совпадает с ожидаемым для конкретной указанной вами визуализации Vega. Например, следующая таблица DataTable создается со столбцами, имеющими идентификаторы для 'category' и 'amount' , и те же идентификаторы используются в опции «вега» для ссылки на эти столбцы.

С таблицей данных

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

Со встроенными данными 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);

Однако таким образом в VegaChart можно передать только одну такую таблицу данных, в то время как для некоторых диаграмм Vega требуется более одной таблицы данных. Мы устраним это ограничение в будущих версиях Google Charts.

Тем временем вы можете указать любые дополнительные данные, которые вам нужно использовать, в опции 'vega' 'data' , либо встроив их, либо загрузив их с URL-адреса. Примеры того и другого можно найти ниже.

Параметры конфигурации

Имя
диаграммаОбласть	Объект с элементами для настройки размещения и размера области диаграммы (там, где рисуется сама диаграмма, за исключением осей и условных обозначений). Поддерживаются два формата: число или число, за которым следует %. Простое число — это значение в пикселях; число, за которым следует %, представляет собой процент. Пример: `chartArea:{left:20,top:0,width:'50%',height:'75%'}` Тип: объект По умолчанию: ноль
ChartArea.bottom	На каком расстоянии рисовать график от нижней границы. Тип: число или строка По умолчанию: авто
chartArea.left	Как далеко рисовать график от левой границы. Тип: число или строка По умолчанию: авто
chartArea.right	Как далеко провести график от правой границы. Тип: число или строка По умолчанию: авто
chartArea.top	Как далеко рисовать диаграмму от верхней границы. Тип: число или строка По умолчанию: авто
ChartArea.width	Ширина области диаграммы. Тип: число или строка По умолчанию: авто
chartArea.height	Высота области диаграммы. Тип: число или строка По умолчанию: авто
высота	Высота диаграммы в пикселях. Тип: номер По умолчанию: высота содержащего элемента
ширина	Ширина диаграммы в пикселях. Тип: номер По умолчанию: ширина содержащего элемента

Методы

Метод
`draw(data, options)`	Рисует график. Диаграмма принимает дальнейшие вызовы методов только после запуска события `ready` . `Extended description` . Тип возврата: нет
`getAction(actionID)`	Возвращает объект действия всплывающей подсказки с запрошенным `actionID` . Тип возвращаемого значения: объект
`getBoundingBox(id)`	Возвращает объект, содержащий левый, верхний, ширину и высоту `id` элемента диаграммы. Формат `id` еще не задокументирован (это возвращаемые значения обработчиков событий ), но вот несколько примеров: `var cli = chart.getChartLayoutInterface();` Высота области диаграммы `cli.getBoundingBox('chartarea').height` Ширина третьего столбца в первой серии гистограммы или гистограммы. `cli.getBoundingBox('bar#0#2').width` Ограничительная рамка пятого сегмента круговой диаграммы `cli.getBoundingBox('slice#4')` Граничная рамка данных вертикальной (например, столбчатой) диаграммы: `cli.getBoundingBox('vAxis#0#gridline')` Граничная рамка данных диаграммы горизонтальной (например, гистограммы): `cli.getBoundingBox('hAxis#0#gridline')` Значения относятся к контейнеру диаграммы. Вызовите это после того, как диаграмма будет нарисована. Тип возвращаемого значения: объект
`getChartAreaBoundingBox()`	Возвращает объект, содержащий левую, верхнюю, ширину и высоту содержимого диаграммы (т. е. исключая метки и легенду): `var cli = chart.getChartLayoutInterface();` `cli.getChartAreaBoundingBox().left` `cli.getChartAreaBoundingBox().top` `cli.getChartAreaBoundingBox().height` `cli.getChartAreaBoundingBox().width` Значения относятся к контейнеру диаграммы. Вызовите это после того, как диаграмма будет нарисована. Тип возвращаемого значения: объект
`getChartLayoutInterface()`	Возвращает объект, содержащий информацию о расположении диаграммы и ее элементов на экране. Следующие методы могут быть вызваны для возвращаемого объекта: `getBoundingBox` `getChartAreaBoundingBox` `getHAxisValue` `getVAxisValue` `getXLocation` `getYLocation` Вызовите это после того, как диаграмма будет нарисована. Тип возвращаемого значения: объект
`getHAxisValue(xPosition, optional_axis_index)`	Возвращает значение данных по горизонтали в `xPosition` , которое представляет собой смещение в пикселях от левого края контейнера диаграммы. Может быть отрицательным. Пример: `chart.getChartLayoutInterface().getHAxisValue(400)` . Вызовите это после того, как диаграмма будет нарисована. Тип возврата: число
`getImageURI()`	Возвращает диаграмму, сериализованную как URI изображения. Вызовите это после того, как диаграмма будет нарисована. См. Печать диаграмм PNG . Тип возвращаемого значения: строка
`getSelection()`	Возвращает массив выбранных объектов диаграммы. Для этой диаграммы в любой момент можно выбрать только один объект. `Extended description` . Тип возвращаемого значения: Массив элементов выбора
`getVAxisValue(yPosition, optional_axis_index)`	Возвращает значение данных по вертикали в `yPosition` , которое представляет собой смещение в пикселях вниз от верхнего края контейнера диаграммы. Может быть отрицательным. Пример: `chart.getChartLayoutInterface().getVAxisValue(300)` . Вызовите это после того, как диаграмма будет нарисована. Тип возврата: число
`getXLocation(dataValue, optional_axis_index)`	Возвращает x-координату `dataValue` относительно левого края контейнера диаграммы. Пример: `chart.getChartLayoutInterface().getXLocation(400)` . Вызовите это после того, как диаграмма будет нарисована. Тип возврата: число
`getYLocation(dataValue, optional_axis_index)`	Возвращает y-координату `dataValue` относительно верхнего края контейнера диаграммы. Пример: `chart.getChartLayoutInterface().getYLocation(300)` . Вызовите это после того, как диаграмма будет нарисована. Тип возврата: число
`removeAction(actionID)`	Удаляет действие всплывающей подсказки с запрошенным `actionID` действия с графика. Тип возврата: `none`
`setAction(action)`	Устанавливает действие всплывающей подсказки, которое будет выполняться, когда пользователь щелкает текст действия. Метод `setAction` принимает объект в качестве параметра действия. Этот объект должен указывать 3 свойства: `id` — идентификатор устанавливаемого действия, `text` — текст, который должен появиться во всплывающей подсказке для действия, и `action` — функция, которая должна запускаться, когда пользователь нажимает на текст действия. Любые и все действия всплывающей подсказки должны быть установлены до вызова метода `draw()` диаграммы. Расширенное описание . Тип возврата: `none`
`setSelection()`	Выбирает указанные объекты диаграммы. Отменяет любой предыдущий выбор. Для этой диаграммы одновременно может быть выбран только один объект. `Extended description` . Тип возврата: нет
`clearChart()`	Очищает диаграмму и освобождает все выделенные ей ресурсы. Тип возврата: нет

События

Дополнительные сведения о том, как использовать эти события, см. в разделах Базовая интерактивность , Обработка событий и Активация событий .

Имя
`animationfinish`	Запускается, когда анимация перехода завершена. Свойства: нет
`click`	Запускается, когда пользователь щелкает внутри диаграммы. Может использоваться для определения момента щелчка по заголовку, элементам данных, записям легенды, осям, линиям сетки или меткам. Свойства: targetID
`error`	Запускается, когда возникает ошибка при попытке отобразить диаграмму. Свойства: идентификатор, сообщение
`legendpagination`	Запускается, когда пользователь нажимает стрелки пагинации легенды. Возвращает индекс страниц текущей легенды, отсчитываемый от нуля, и общее количество страниц. Свойства: currentPageIndex, totalPages
`onmouseover`	Запускается, когда пользователь наводит курсор мыши на визуальный объект. Возвращает обратно индексы строк и столбцов соответствующего элемента таблицы данных. Свойства: строка, столбец
`onmouseout`	Запускается, когда пользователь уводит мышь от визуального объекта. Возвращает обратно индексы строк и столбцов соответствующего элемента таблицы данных. Свойства: строка, столбец
`ready`	Диаграмма готова к вызову внешних методов. Если вы хотите взаимодействовать с диаграммой и вызывать методы после ее рисования, вы должны настроить прослушиватель для этого события до вызова метода `draw` и вызывать их только после того, как событие было запущено. Свойства: нет
`select`	Запускается, когда пользователь щелкает визуальный объект. Чтобы узнать, что было выбрано, вызовите `getSelection()` . Свойства: нет

Политика данных

Весь код и данные обрабатываются и отображаются в браузере. Никакие данные не отправляются ни на один сервер.