如何将渲染器指定为 SVG?
How to specify renderer as SVG?
我正在使用 this VEGA-lite example 的克隆及其图表规格作为参考,并添加了 renderer
选项
{
"$schema": "https://vega.github.io/schema/vega-lite/v3.json",
"description": "A simple ...",
"..ETC..": "...",
"renderer": "svg"
}
但图表保持为 PNG...如何使用 renderer
选项?
PS: online spec have no renderer
definition... there are some confusion about VEGA-lite and VEGA-view?
渲染器不是 Vega-Lite 规范的 属性,而是 Vega-Embed option。
如何指定取决于您呈现图表的方式。例如,如果您 open the chart in the vega editor,您可以从右上角的 设置 菜单中选择 SVG 渲染器。
如果您直接生成 HTML,您可以将嵌入选项传递给 vegaEmbed
调用;例如:
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@4"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
</head>
<body>
<div id="vis"></div>
<script>
const spec = "bar.vl.json";
vegaEmbed("#vis", spec, {renderer: "svg"})
.then(result => console.log(result))
.catch(console.warn);
</script>
</body>
也可以在图表规范本身的 usermeta
字段中表达 Vega-Embed 选项;例如:
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"usermeta": {"embedOptions": {"renderer": "svg"}},
"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"}
}
}
这应该可以在任何 vega 嵌入调用中正常工作(但不会工作,例如,在使用不同渲染方法的 vega 编辑器中)。
我正在使用 this VEGA-lite example 的克隆及其图表规格作为参考,并添加了 renderer
选项
{
"$schema": "https://vega.github.io/schema/vega-lite/v3.json",
"description": "A simple ...",
"..ETC..": "...",
"renderer": "svg"
}
但图表保持为 PNG...如何使用 renderer
选项?
PS: online spec have no renderer
definition... there are some confusion about VEGA-lite and VEGA-view?
渲染器不是 Vega-Lite 规范的 属性,而是 Vega-Embed option。
如何指定取决于您呈现图表的方式。例如,如果您 open the chart in the vega editor,您可以从右上角的 设置 菜单中选择 SVG 渲染器。
如果您直接生成 HTML,您可以将嵌入选项传递给 vegaEmbed
调用;例如:
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@4"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
</head>
<body>
<div id="vis"></div>
<script>
const spec = "bar.vl.json";
vegaEmbed("#vis", spec, {renderer: "svg"})
.then(result => console.log(result))
.catch(console.warn);
</script>
</body>
也可以在图表规范本身的 usermeta
字段中表达 Vega-Embed 选项;例如:
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"usermeta": {"embedOptions": {"renderer": "svg"}},
"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"}
}
}
这应该可以在任何 vega 嵌入调用中正常工作(但不会工作,例如,在使用不同渲染方法的 vega 编辑器中)。