概览
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 |
在用户点击视觉实体时触发。如需了解所选内容，请调用 属性：无
|
数据政策
所有代码和数据都会在浏览器中进行处理和呈现。不会向任何服务器发送数据。