概览
VegaChart 是使用 Vega 可视化语法(一种用于创建、保存和共享交互式可视化设计的声明性语言)可能创建的可视化图片之一。 借助 Vega,您能够以 JSON 格式描述可视化的视觉外观和互动行为,并使用 Canvas 或 SVG 生成基于网络的视图。
绘制 VegaChart 时,您必须在选项中添加有关如何在 Vega 可视化语法中构建图表的规范。下面列举了一些此类规范,您还可以在 VegaChart 示例页面中找到更多示例。
注意:虽然 Google Charts VegaChart 可以绘制任何使用 Vega JSON 规范(包括示例库中的所有内容)指定的 Vega 图表,但尚不支持对 Vega API 进行调用的其他功能。
简单示例:条形图
下面是一个简单的 VegaChart 示例,用于绘制条形图。 (请参阅原始示例、详细教程和 Vega 图表编辑器中的条形图)。
虽然这也是一种在 Google 图表中生成条形图的另一种方式,但我们计划将其他条形图和柱形图的所有功能集成到基于此 VegaChart 的新实现中。
请注意,此示例将“data”选项替换为以下内容,后者使用绘图调用提供的“datatable”作为另一个名为“table”的数据对象的“source”,而“table”则用于 Vega 规范的其余部分。
'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>
正在加载
google.charts.load
软件包名称为 "vegachart"
。
google.charts.load("current", {packages: ["vegachart"]});
可视化图表的类名称为 google.visualization.VegaChart
。
var visualization = new google.visualization.VegaChart(container);
数据格式
使用 DataTable(或 DataView)向 VegaChart 传递数据的方式与其他 Google 图表非常类似。主要区别在于,VegaChart 依赖于每列的 ID 与您指定的特定 Vega 可视化图表的预期相同,而不是依赖于列的顺序来确定列的使用方式。例如,使用以下 DataTable 创建了列,这些列的 ID 为 'category'
和 'amount'
,“id”选项中的相同 ID 则用于引用这些列。
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);
不过,通过这种方式只能将一个这样的 DataTable 传入 VegaChart,而某些 Vega 图表则需要多个数据表。我们会在未来的 Google 图表版本中解决此限制。
在此期间,您可以通过内嵌或从网址加载的方式,指定需要在 'vega'
'data'
选项中使用的任何其他数据。
下文提供了这两种方式的示例。
配置选项
名称 | |
---|---|
图表区域 |
一个具有成员的对象,用于配置图表区域的位置和大小(绘制图表本身时,不包括轴和图例)。支持两种格式:数字或后跟 % 的数字。简单的数字是一个以像素为单位的值,数字后跟 % 是一个百分比。示例: Type:对象
默认:null
|
chartArea.bottom |
从下边框绘制的距离是多少。 类型:数字或字符串
默认:自动
|
图表区域 |
从左边框绘制图表的距离。 类型:数字或字符串
默认:自动
|
图表区域 |
从右边框绘制图表的距离。 类型:数字或字符串
默认:自动
|
图表区域 |
从上边框绘制图表的距离。 类型:数字或字符串
默认:自动
|
图表区域.宽度 |
图表区域宽度。 类型:数字或字符串
默认:自动
|
图表.a.height |
图表区域高度。 类型:数字或字符串
默认:自动
|
高度 |
图表的高度(以像素为单位)。 类型:数字
默认:包含元素的高度
|
width |
图表的宽度(以像素为单位)。 类型:数字
默认:包含元素的宽度
|
方法
方法 | |
---|---|
draw(data, options) |
绘制图表。图表仅在 返回值类型:无
|
getAction(actionID) |
返回包含请求的 返回值类型:
|
getBoundingBox(id) |
返回一个对象,包含图表元素
值是相对于图表容器而言的。在绘制图表之后调用此方法。 返回值类型:
|
getChartAreaBoundingBox() |
返回一个包含图表内容的左侧、顶部、宽度和高度的对象(即不包括标签和图例):
值是相对于图表容器而言的。在绘制图表之后调用此方法。 返回值类型:
|
getChartLayoutInterface() |
返回一个对象,其中包含有关图表的屏幕位置及其元素的信息。 可以对返回的对象调用以下方法:
在绘制图表之后调用此方法。 返回值类型:
|
getHAxisValue(xPosition, optional_axis_index) |
返回 示例: 在绘制图表之后调用此方法。 返回值类型:数字
|
getImageURI() |
返回序列化为图片 URI 的图表。 在绘制图表之后调用此方法。 请参阅打印 PNG 图表。 返回值类型:返回值类型
|
getSelection() |
返回一组选定图表实体的数组。
在此图表中,在任何时候都只能选择一个实体。
返回值类型:一组选择元素
|
getVAxisValue(yPosition, optional_axis_index) |
返回 示例: 在绘制图表之后调用此方法。 返回值类型:数字
|
getXLocation(dataValue, optional_axis_index) |
返回 示例: 在绘制图表之后调用此方法。 返回值类型:数字
|
getYLocation(dataValue, optional_axis_index) |
返回 示例: 在绘制图表之后调用此方法。 返回值类型:数字
|
removeAction(actionID) |
从图表中移除所请求的 返回值类型:
none |
setAction(action) |
设置要在用户点击操作文本时执行的提示操作。
所有提示提示操作均应在调用图表的 返回值类型:
none |
setSelection() |
选择指定的图表实体。取消之前选择的所有内容。
对于此图表,一次只能选择一个实体。
返回值类型:无
|
clearChart() |
清除该图表,并释放其分配的所有资源。 返回值类型:无
|
事件
如需详细了解如何使用这些事件,请参阅基本互动、处理事件和触发事件。
名称 | |
---|---|
animationfinish |
在过渡动画播放完毕时触发。 属性:无
|
click |
在用户点击图表内时触发。可用于识别标题、数据元素、图例条目、轴、网格线或标签何时得到点击。 属性:targetID
|
error |
尝试渲染图表出错时触发。 属性:ID、消息
|
legendpagination |
在用户点击图例分页箭头时触发。传回当前图例中从零开始的页面索引和总页数。 属性:currentPageIndex、totalPages
|
onmouseover |
用户将鼠标放在视觉实体上时触发。传递相应数据表元素的行索引和列索引。 属性:行、列
|
onmouseout |
在用户离开可见实体时触发。传递相应数据表元素的行索引和列索引。 属性:行、列
|
ready |
此图表已准备好进行外部方法调用。如果您想与图表交互,并在绘制后调用方法,则应在调用 属性:无
|
select |
在用户点击视觉实体时触发。如需了解所选内容,请调用 属性:无
|
数据政策
所有代码和数据都会在浏览器中进行处理和呈现。不会向任何服务器发送数据。