这是一组使用 VegaChart 的示例。您可以找到更多可与 VegaChart 搭配使用的 Vega 示例和 Vega-Lite 示例。
VegaChart 和 Vega 示例
热图示例
VegaChart 可以为每个单元格使用简单的 rect 标记绘制热图。（原始示例）
在此示例中，系统使用以下“数据”规范从 csv 文件加载体温数据。
"data": [
{
"name": "temperature",
"url": "https://vega.github.io/editor/data/seattle-temps.csv"
...
}
]
<html>
<head>
<script src='https://www.gstatic.com/charts/loader.js'></script>
<script>
google.charts.load('upcoming', {'packages': ['vegachart']}).then(drawChart);
function drawChart() {
// A DataTable is required, but it can be empty.
const dataTable = new google.visualization.DataTable();
const options = {
'vega': {
"$schema": "https://vega.github.io/schema/vega/v5.json",
"width": 500,
"height": 500,
"padding": 5,
"title": {
"text": "Seattle Annual Temperatures",
"anchor": "middle",
"fontSize": 16,
"frame": "group",
"offset": 4
},
"data": [
{
"name": "temperature",
"url": "https://vega.github.io/vega/data/seattle-weather-hourly-normals.csv",
"format": {"type": "csv", "parse": {"temperature": "number", "date": "date"}},
"transform": [
{
"type": "formula", "as": "hour",
"expr": "hours(datum.date)"
},
{
"type": "formula", "as": "day",
"expr": "datetime(year(datum.date), month(datum.date), date(datum.date))"
}
]
}
],
"scales": [
{
"name": "x",
"type": "time",
"domain": {"data": "temperature", "field": "day"},
"range": "width"
},
{
"name": "y",
"type": "band",
"domain": [
6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23,
0, 1, 2, 3, 4, 5
],
"range": "height"
},
{
"name": "color",
"type": "linear",
"range": {"scheme": "redyellowblue"},
"domain": {"data": "temperature", "field": "temperature"},
"reverse": true,
"zero": false, "nice": true
}
],
"axes": [
{"orient": "bottom", "scale": "x", "domain": false, "title": "Month", "format": "%b"},
{
"orient": "left", "scale": "y", "domain": false, "title": "Hour",
"encode": {
"labels": {
"update": {
"text": {
"signal": "datum.value === 0 ? 'Midnight' : datum.value === 12 ? 'Noon' : datum.value < 12 ? datum.value + ':00 am' : (datum.value - 12) + ':00 pm'"
}
}
}
}
}
],
"legends": [
{
"fill": "color",
"type": "gradient",
"title": "Avg. Temp (°F)",
"titleFontSize": 12,
"titlePadding": 4,
"gradientLength": {"signal": "height - 16"}
}
],
"marks": [
{
"type": "rect",
"from": {"data": "temperature"},
"encode": {
"enter": {
"x": {"scale": "x", "field": "day"},
"y": {"scale": "y", "field": "hour"},
"width": {"value": 5},
"height": {"scale": "y", "band": 1},
"tooltip": {
"signal":
"timeFormat(datum.date, '%b %d %I:00 %p') + ': ' + datum.temperature + '°'"
}
},
"update": {
"fill": {"scale": "color", "field": "temperature"}
}
}
}
]
}
};
const chart = new google.visualization.VegaChart(document.getElementById('chart-div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id="chart-div" style="width: 500px; height: 500px;"></div>
</body>
</html>
火山轮廓示例
VegaChart 可以使用 icocontour 转换绘制火山轮廓图表。（原始示例）
在此示例中，系统将使用以下“数据”规范从 json 文件加载火山数据。
"data": [
{
"name": "volcano",
"url": "https://vega.github.io/editor/data/volcano.json"
}
]
<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();
const options = {
'vega': {
"$schema": "https://vega.github.io/schema/vega/v5.json",
"width": 600,
"autosize": "none",
"signals": [
{
"name": "grid",
"init": "data('volcano')[0]"
},
{
"name": "height",
"update": "round(grid.height * width / grid.width)"
},
{
"name": "smooth", "value": true,
"bind": {"input": "radio", "options": [true, false]}
}
],
"data": [
{
"name": "volcano",
"url": "https://vega.github.io/editor/data/volcano.json"
},
{
"name": "contours",
"source": "volcano",
"transform": [
{
"type": "isocontour",
"scale": {"expr": "width / datum.width"},
"smooth": {"signal": "smooth"},
"thresholds": {"signal": "sequence(90, 195, 5)"}
}
]
}
],
"scales": [
{
"name": "color",
"type": "linear",
"domain": [90, 190],
"range": {"scheme": "blueorange"}
}
],
"marks": [
{
"type": "path",
"from": {"data": "contours"},
"encode": {
"enter": {
"stroke": {"value": "#ccc"},
"strokeWidth": {"value": 1},
"fill": {"scale": "color", "field": "contour.value"}
}
},
"transform": [
{
"type": "geopath",
"field": "datum.contour"
}
]
}
]
}
};
const chart = new google.visualization.VegaChart(document.getElementById('chart-div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id="chart-div" style="width: 500px; height: 500px;"></div>
</body>
</html>
BeeSwarm 示例
VegaChart 可以使用 force 转换绘制 BeeSwarm 图表。（原始示例）
<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();
const options = {
'vega': {
"$schema": "https://vega.github.io/schema/vega/v5.json",
"width": 600,
"height": 100,
"padding": {"left": 5, "right": 5, "top": 0, "bottom": 20},
"autosize": "none",
"signals": [
{ "name": "cx", "update": "width / 2" },
{ "name": "cy", "update": "height / 2" },
{ "name": "radius", "value": 8, "bind": {"input": "range", "min": 2, "max": 15, "step": 1} },
{ "name": "collide", "value": 1, "bind": {"input": "range", "min": 1, "max": 10, "step": 1} },
{ "name": "gravityX", "value": 0.2, "bind": {"input": "range", "min": 0, "max": 1} },
{ "name": "gravityY", "value": 0.1, "bind": {"input": "range", "min": 0, "max": 1} },
{ "name": "static", "value": true, "bind": {"input": "checkbox"} }
],
"data": [
{
"name": "people",
"url": "https://vega.github.io/editor/data/miserables.json",
"format": {"type": "json", "property": "nodes"}
}
],
"scales": [
{
"name": "xscale",
"type": "band",
"domain": {
"data": "people",
"field": "group",
"sort": true
},
"range": "width"
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "people", "field": "group"},
"range": {"scheme": "category20c"}
}
],
"axes": [
{ "orient": "bottom", "scale": "xscale" }
],
"marks": [
{
"name": "nodes",
"type": "symbol",
"from": {"data": "people"},
"encode": {
"enter": {
"fill": {"scale": "color", "field": "group"},
"xfocus": {"scale": "xscale", "field": "group", "band": 0.5},
"yfocus": {"signal": "cy"}
},
"update": {
"size": {"signal": "pow(2 * radius, 2)"},
"stroke": {"value": "white"},
"strokeWidth": {"value": 1},
"zindex": {"value": 0}
},
"hover": {
"stroke": {"value": "purple"},
"strokeWidth": {"value": 3},
"zindex": {"value": 1}
}
},
"transform": [
{
"type": "force",
"iterations": 300,
"static": {"signal": "static"},
"forces": [
{"force": "collide", "iterations": {"signal": "collide"}, "radius": {"signal": "radius"}},
{"force": "x", "x": "xfocus", "strength": {"signal": "gravityX"}},
{"force": "y", "y": "yfocus", "strength": {"signal": "gravityY"}}
]
}
]
}
]
}
};
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>
雷达图示例
VegaChart 可用于绘制三个小型雷达图表。（类似雷达图的原始示例）
<html>
<head>
<title>Radar Chart Small Multiples</title>
<script src='https://www.gstatic.com/charts/loader.js'></script>
<script>
google.charts.load('upcoming', {'packages': ['vegachart']}).then(loadCharts);
const lasagna = [
["Protein",0.1308,"Lasagna, cheese, frozen, prepared"],
["Carbohydrates",0.05032727272727273,"Lasagna, cheese, frozen, prepared"],
["Vitamin C",0.228,"Lasagna, cheese, frozen, prepared"],
["Calcium",0.08538461538461538,"Lasagna, cheese, frozen, prepared"],
["Zinc",0.11375,"Lasagna, cheese, frozen, prepared"],
["Sodium",0.18933333333333333,"Lasagna, cheese, frozen, prepared"]
];
const pork = [
["Protein",0.2638,"Pulled pork in barbecue sauce"],
["Carbohydrates",0.06814545454545454,"Pulled pork in barbecue sauce"],
["Vitamin C",0.002666666666666667,"Pulled pork in barbecue sauce"],
["Calcium",0.033846153846153845,"Pulled pork in barbecue sauce"],
["Zinc",0.23125,"Pulled pork in barbecue sauce"],
["Sodium",0.444,"Pulled pork in barbecue sauce"]
];
const melon = [
["Protein",0.0168,"Melons, cantaloupe, raw"],
["Carbohydrates",0.029672727272727274,"Melons, cantaloupe, raw"],
["Vitamin C",0.4893333333333334,"Melons, cantaloupe, raw"],
["Calcium",0.006923076923076923,"Melons, cantaloupe, raw"],
["Zinc",0.0225,"Melons, cantaloupe, raw"],
["Sodium",0.010666666666666666,"Melons, cantaloupe, raw"]
];
function loadCharts() {
addChart(lasagna[0][2], lasagna, "#B82E2E");
addChart(pork[0][2], pork, "#6633CC");
addChart(melon[0][2], melon, "#109618");
};
function addChart(title, data, color) {
const dataTable = new google.visualization.DataTable();
dataTable.addColumn({type: 'string', 'id': 'key'});
dataTable.addColumn({type: 'number', 'id': 'value'});
dataTable.addColumn({type: 'string', 'id': 'category'});
dataTable.addRows(data);
const options = {
'vega': {
"$schema": "https://vega.github.io/schema/vega/v5.json",
"width": 250,
"height": 300,
"autosize": "none",
"title": {
"text": title,
"anchor": "middle",
"fontSize": 14,
"dy": -8,
"dx": {"signal": "-width/4"},
"subtitle": "RDI per 100g"
},
"signals": [
{"name": "radius", "update": "90"}
],
"data": [
{
"name": "table",
"source": "datatable",
},
{
"name": "keys",
"source": "table",
"transform": [
{
"type": "aggregate",
"groupby": ["key"]
}
]
}
],
"scales": [
{
"name": "angular",
"type": "point",
"range": {"signal": "[-PI, PI]"},
"padding": 0.5,
"domain": {"data": "table", "field": "key"}
},
{
"name": "radial",
"type": "linear",
"range": {"signal": "[0, radius]"},
"zero": true,
"nice": false,
"domain": [0,0.5],
}
],
"encode": {
"enter": {
"x": {"signal": "width/2"},
"y": {"signal": "height/2 + 20"}
}
},
"marks": [
{
"type": "group",
"name": "categories",
"zindex": 1,
"from": {
"facet": {"data": "table", "name": "facet", "groupby": ["category"]}
},
"marks": [
{
"type": "line",
"name": "category-line",
"from": {"data": "facet"},
"encode": {
"enter": {
"interpolate": {"value": "linear-closed"},
"x": {"signal": "scale('radial', datum.value) * cos(scale('angular', datum.key))"},
"y": {"signal": "scale('radial', datum.value) * sin(scale('angular', datum.key))"},
"stroke": {"value": color},
"strokeWidth": {"value": 1.5},
"fill": {"value": color},
"fillOpacity": {"value": 0.1}
}
}
},
{
"type": "text",
"name": "value-text",
"from": {"data": "category-line"},
"encode": {
"enter": {
"x": {"signal": "datum.x + 14 * cos(scale('angular', datum.datum.key))"},
"y": {"signal": "datum.y + 14 * sin(scale('angular', datum.datum.key))"},
"text": {"signal": "format(datum.datum.value,'.1%')"},
"opacity": {"signal": "datum.datum.value > 0.01 ? 1 : 0"},
"align": {"value": "center"},
"baseline": {"value": "middle"},
"fontWeight": {"value": "bold"},
"fill": {"value": color},
}
}
}
]
},
{
"type": "rule",
"name": "radial-grid",
"from": {"data": "keys"},
"zindex": 0,
"encode": {
"enter": {
"x": {"value": 0},
"y": {"value": 0},
"x2": {"signal": "radius * cos(scale('angular', datum.key))"},
"y2": {"signal": "radius * sin(scale('angular', datum.key))"},
"stroke": {"value": "lightgray"},
"strokeWidth": {"value": 1}
}
}
},
{
"type": "text",
"name": "key-label",
"from": {"data": "keys"},
"zindex": 1,
"encode": {
"enter": {
"x": {"signal": "(radius + 11) * cos(scale('angular', datum.key))"},
"y": [
{
"test": "sin(scale('angular', datum.key)) > 0",
"signal": "5 + (radius + 11) * sin(scale('angular', datum.key))"
},
{
"test": "sin(scale('angular', datum.key)) < 0",
"signal": "-5 + (radius + 11) * sin(scale('angular', datum.key))"
},
{
"signal": "(radius + 11) * sin(scale('angular', datum.key))"
}
],
"text": {"field": "key"},
"align":
{
"value": "center"
},
"baseline": [
{
"test": "scale('angular', datum.key) > 0", "value": "top"
},
{
"test": "scale('angular', datum.key) == 0", "value": "middle"
},
{
"value": "bottom"
}
],
"fill": {"value": "black"},
"fontSize": {"value": 12}
}
}
},
{
"type": "line",
"name": "twenty-line",
"from": {"data": "keys"},
"encode": {
"enter": {
"interpolate": {"value": "linear-closed"},
"x": {"signal": "0.2 * radius * cos(scale('angular', datum.key))"},
"y": {"signal": "0.2 * radius * sin(scale('angular', datum.key))"},
"stroke": {"value": "lightgray"},
"strokeWidth": {"value": 1}
}
}
},
{
"type": "line",
"name": "fourty-line",
"from": {"data": "keys"},
"encode": {
"enter": {
"interpolate": {"value": "linear-closed"},
"x": {"signal": "0.4 * radius * cos(scale('angular', datum.key))"},
"y": {"signal": "0.4 * radius * sin(scale('angular', datum.key))"},
"stroke": {"value": "lightgray"},
"strokeWidth": {"value": 1}
}
}
},
{
"type": "line",
"name": "sixty-line",
"from": {"data": "keys"},
"encode": {
"enter": {
"interpolate": {"value": "linear-closed"},
"x": {"signal": "0.6 * radius * cos(scale('angular', datum.key))"},
"y": {"signal": "0.6 * radius * sin(scale('angular', datum.key))"},
"stroke": {"value": "lightgray"},
"strokeWidth": {"value": 1}
}
}
},
{
"type": "line",
"name": "eighty-line",
"from": {"data": "keys"},
"encode": {
"enter": {
"interpolate": {"value": "linear-closed"},
"x": {"signal": "0.8 * radius * cos(scale('angular', datum.key))"},
"y": {"signal": "0.8 * radius * sin(scale('angular', datum.key))"},
"stroke": {"value": "lightgray"},
"strokeWidth": {"value": 1}
}
}
},
{
"type": "line",
"name": "outer-line",
"from": {"data": "radial-grid"},
"encode": {
"enter": {
"interpolate": {"value": "linear-closed"},
"x": {"field": "x2"},
"y": {"field": "y2"},
"stroke": {"value": "lightgray"},
"strokeWidth": {"value": 1}
}
}
}
]
}
};
const elem = document.createElement("div");
elem.setAttribute("style", "display: inline-block; width: 250px; height: 300px; padding: 20px;");
const chart = new google.visualization.VegaChart(elem);
chart.draw(dataTable, options);
document.getElementById("chart-area").appendChild(elem);
}
</script>
</head>
<body>
<div id="chart-area"></div>
</body>
</html>
将 VegaChart 与 Vega-Lite 结合使用的示例
带有边际直方图的热图示例
VegaChart 可以绘制热图，并沿每个轴绘制直方图。（原始示例：边际直方图）
<html>
<head>
<script src='https://www.gstatic.com/charts/loader.js'></script>
<script>
google.charts.load('upcoming', {'packages': ['vegachart']}).then(drawChart);
function drawChart() {
// A DataTable is required, but it can be empty.
const dataTable = new google.visualization.DataTable();
const options = {
'vegaLite': {
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"data": {"url": "https://vega.github.io/vega/data/movies.json"},
"spacing": 15,
"bounds": "flush",
"vconcat": [{
"mark": "bar",
"height": 60,
"encoding": {
"x": {
"bin": true,
"field": "IMDB Rating",
"axis": null
},
"y": {
"aggregate": "count",
"scale": {
"domain": [0,1000]
},
"title": ""
}
}
}, {
"spacing": 15,
"bounds": "flush",
"hconcat": [{
"mark": "rect",
"encoding": {
"x": {"bin": true, "field": "IMDB Rating"},
"y": {"bin": true, "field": "Rotten Tomatoes Rating"},
"color": {"aggregate": "count"}
}
}, {
"mark": "bar",
"width": 60,
"encoding": {
"y": {
"bin": true,
"field": "Rotten Tomatoes Rating",
"axis": null
},
"x": {
"aggregate": "count",
"scale": {"domain": [0,1000]},
"title": ""
}
}
}]
}],
"config": {
"view": {
"stroke": "transparent"
}
}
}
};
const chart = new google.visualization.VegaChart(document.getElementById('chart-div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id="chart-div"></div>
</body>
</html>
序列生成器示例
VegaChart 可以使用序列生成器生成数据。（原始示例：使用序列生成器绘制正弦和余弦曲线）
<html>
<head>
<script src='https://www.gstatic.com/charts/loader.js'></script>
<script>
google.charts.load('upcoming', {'packages': ['vegachart']}).then(drawChart);
function drawChart() {
// A DataTable is required, but it can be empty.
const dataTable = new google.visualization.DataTable();
const options = {
'vegaLite': {
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "Plots two functions using a generated sequence.",
"width": 300,
"height": 150,
"data": {
"sequence": {
"start": 0,
"stop": 12.7,
"step": 0.1,
"as": "x"
}
},
"transform": [
{
"calculate": "sin(datum.x)",
"as": "sin(x)"
},
{
"calculate": "cos(datum.x)",
"as": "cos(x)"
},
{
"fold": ["sin(x)", "cos(x)"]
}
],
"mark": "line",
"encoding": {
"x": {
"type": "quantitative",
"field": "x"
},
"y": {
"field": "value",
"type": "quantitative"
},
"color": {
"field": "key",
"type": "nominal",
"title": null
}
}
}
};
const chart = new google.visualization.VegaChart(document.getElementById('chart-div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id="chart-div" style="width: 500px; height: 300px;"></div>
</body>
</html>
径向图示例
VegaChart 可以使用角度和径向范围在径向图中传达多个维度的数据。 （原始示例：径向图）
<html>
<head>
<script src='https://www.gstatic.com/charts/loader.js'></script>
<script>
google.charts.load('upcoming', {'packages': ['vegachart']}).then(drawChart);
function drawChart() {
// A DataTable is required, but it can be empty.
const dataTable = new google.visualization.DataTable();
const options = {
'vegaLite': {
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "A simple radial chart with embedded data.",
"data": {
"values": [12, 23, 47, 6, 52, 19]
},
"layer": [
{
"mark": {"type": "arc", "innerRadius": 20, "stroke": "#fff"}
},
{
"mark": {"type": "text", "radiusOffset": 10},
"encoding": {
"text": {"field": "data", "type": "quantitative"}
}
}],
"encoding": {
"theta": {"field": "data", "type": "quantitative", "stack": true},
"radius": {"field": "data", "scale": {"type": "sqrt", "zero": true, "rangeMin": 20}},
"color": {"field": "data", "type": "nominal", "legend": null}
},
"view": {"stroke": null}
}
};
const chart = new google.visualization.VegaChart(document.getElementById('chart-div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id="chart-div" style="width: 500px; height: 500px;"></div>
</body>
</html>