如何将渲染器指定为 SVG?
Posted
技术标签:
【中文标题】如何将渲染器指定为 SVG?【英文标题】:How to specify renderer as SVG? 【发布时间】:2020-04-19 12:14:42 【问题描述】:我使用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 没有 renderer
的定义...关于 VEGA-lite 和 VEGA-view 有一些混淆?
【问题讨论】:
【参考方案1】:渲染器不是 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-embed 调用中正常工作(但不会工作,例如,在使用不同渲染方法的 vega 编辑器中)。
【讨论】:
以上是关于如何将渲染器指定为 SVG?的主要内容,如果未能解决你的问题,请参考以下文章
在 win32 (C++) 中打开、操作和渲染 SVG 文件
如何使用Javascript将FontAwesome渲染为SVG图像?