用法
<!doctype html>
<html>
<head>
<title>Embedding Vega-Lite</title>
<script src="https://cdn.jsdelivr.net/npm/vega@5.25.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@5.16.3"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6.22.2"></script>
</head>
<body>
<div id="vis"></div>
<script type="text/javascript">
var yourVlSpec = {
$schema: 'https://vega.github.io/schema/vega-lite/v5.json',
description: 'A simple bar chart with embedded data.',
data: {
values: [
{a: 'A', b: 28},
{a: 'B', b: 55},
{a: 'C', b: 43},
{a: 'D', b: 91},
{a: 'E', b: 81},
{a: 'F', b: 53},
{a: 'G', b: 19},
{a: 'H', b: 87},
{a: 'I', b: 52}
]
},
mark: 'bar',
encoding: {
x: {field: 'a', type: 'ordinal'},
y: {field: 'b', type: 'quantitative'}
}
};
vegaEmbed('#vis', yourVlSpec);
</script>
</body>
</html>
- 效果
教程
<!doctype html>
<html>
<head>
<title>Vega-Lite Bar Chart</title>
<meta charset="utf-8" />
<script src="https://cdn.jsdelivr.net/npm/vega@5.25.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@5.16.3"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6.22.2"></script>
<style media="screen">
/* Add space between Vega-Embed links */
.vega-actions a {
margin-right: 5px;
}
</style>
</head>
<body>
<!-- <h1>Template for Embedding Vega-Lite Visualization</h1> -->
<!-- Container for the visualization -->
<div id="vis"></div>
<script>
// Assign the specification to a local variable vlSpec.
var vlSpec = {
$schema: 'https://vega.github.io/schema/vega-lite/v5.json',
data: {
values: [
{a: 'C', b: 2},
{a: 'C', b: 7},
{a: 'C', b: 4},
{a: 'D', b: 1},
{a: 'D', b: 2},
{a: 'D', b: 6},
{a: 'E', b: 8},
{a: 'E', b: 4},
{a: 'E', b: 7}
]
},
mark: 'bar',
encoding: {
y: {field: 'a', type: 'nominal'},
x: {
aggregate: 'average',
field: 'b',
type: 'quantitative',
axis: {
title: 'Average of b'
}
}
}
};
// Embed the visualization in the container with id `vis`
vegaEmbed('#vis', vlSpec);
</script>
</body>
</html>
- 效果
例子
<!doctype html>
<html>
<head>
<title>Embedding Vega-Lite</title>
<script src="https://cdn.jsdelivr.net/npm/vega@5.25.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@5.16.3"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6.22.2"></script>
</head>
<body>
<div id="vis"></div>
<script type="text/javascript">
var yourVlSpec = {
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A vertical box plot showing median, min, and max body mass of penguins.",
"data": {
// "url": "data/penguins.json"
// 去vega-datasets中找对应的json文件
values: [
{
"Species": "Adelie",
"Island": "Torgersen",
"Beak Length (mm)": 39.1,
"Beak Depth (mm)": 18.7,
"Flipper Length (mm)": 181,
"Body Mass (g)": 3750,
"Sex": "MALE"
},
{
"Species": "Adelie",
"Island": "Dream",
"Beak Length (mm)": 51.7,
"Beak Depth (mm)": 20.3,
"Flipper Length (mm)": 194,
"Body Mass (g)": 3775,
"Sex": "MALE"
},
{
"Species": "Adelie",
"Island": "Biscoe",
"Beak Length (mm)": 49.3,
"Beak Depth (mm)": 15.7,
"Flipper Length (mm)": 217,
"Body Mass (g)": 5850,
"Sex": "MALE"
}
]
},
"mark": {
"type": "boxplot",
"extent": "min-max"
},
"encoding": {
"x": {"field": "Species", "type": "nominal"},
"color": {"field": "Species", "type": "nominal", "legend": null},
"y": {
"field": "Body Mass (g)",
"type": "quantitative",
"scale": {"zero": false}
}
}
};
vegaEmbed('#vis', yourVlSpec);
</script>
</body>
</html>
- 效果图
文档
