如何将 vega-lite 嵌入到 svelte 组件中?
How to embed vega-lite in svelte component?
我尝试使用这个简单的示例在一个 svelte 组件中制作一个 vega-lite 嵌入式图形。我得到 vegaEmbed 未定义。
我之前通过 npm 安装过 vega、vega-lite 和 vega-embed
<script>
import { onMount } from 'svelte';
import * as vega from "vega"
import * as vega-lite from "vega-lite"
import * as vegaEmbed from "vega-embed";
onMount(() => {
let yourVlSpec = {
$schema: 'https://vega.github.io/schema/vega-lite/v2.0.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>
<div id="vis"></div>
我希望简单地显示一个 vegalite 图,接下来我希望它从父组件获取其规格。
如果您直接在您的 index.html 或您的特定 HTML 中导入脚本,您的选项将起作用。
<script src="https://cdn.jsdelivr.net/npm/vega@5.4.0/build/vega.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@3.3.0/build/vega-lite.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@4.2.0/build/vega-embed.js"></script>
根据 https://github.com/vega/vega-embed/blob/v4.0.0/README.md 中的文档,npm 版本公开了一种不同的方法,即 embed
。检查自述文件中的 API 参考部分。
您可以按照
的方式尝试
embed('#vis', yourVlSpec)
请注意,规范参数将字符串参数视为 URL,应该 return 和 JSON。所以如果你的规格是字符串,那么在调用 embed
函数之前做一个 JSON.parse(yourSpec)
会很好。
我在 angular 项目中就是这样做的。注意:以下是使用打字稿的特定示例.. :D
- 首先从您那里导入嵌入功能node_modules。
import {default as embed} from 'vega-embed
;
- 然后在我组件内的一个函数中我调用了
embed
方法。
- 在我的例子中,它是在组件初始化期间调用的 ngOnInit。
ngOnInit() {
// option 1: using a string spec.
let spec = `{
"$schema": "https://vega.github.io/schema/vega-lite/v3.json",
"description": "Simple bar chart",
"data": {
"values": [
{"x": "A", "y": 28}, {"x": "y", "B": 55}, {"x": "C", "y": 43},
{"x": "D", "y": 91}, {"x": "E", "y": 81}, {"x": "F", "y": 53},
{"x": "G", "y": 19}, {"x": "H", "y": 87}, {"x": "I", "y": 52}
]
},
"mark": "bar",
"encoding": {
"x": {"field": "x", "type": "ordinal"},
"y": {"field": "y", "type": "quantitative"}
}
}`;
embed("#vis", "/assets/data/spec2.json", { actions: false }).catch(error =>
console.log(error)
);
// option 2: where the spec is saved as a json file in my project assets.
embed("#vis2", JSON.parse(spec), { actions: false }).catch(error =>
console.log(error)
);
}
我无法使用 rollup,所以 @theWebalyst 建议我切换到 webpack。这里有一个模板:https://github.com/sveltejs/template-webpack
类似
<script>
import {default as vegaEmbed} from 'vega-embed';
export let name;
var spec = "https://raw.githubusercontent.com/vega/vega/master/docs/examples/bar-chart.vg.json";
vegaEmbed("#viz", spec, { actions: false }).catch(error => console.log(error) );
</script>
安装官方 svelte-vega
包。
它同时支持 Vega 和 Vega-Lite 组件。
npm install svelte-vega
按照此处的说明进行操作:https://github.com/vega/svelte-vega。
我尝试使用这个简单的示例在一个 svelte 组件中制作一个 vega-lite 嵌入式图形。我得到 vegaEmbed 未定义。
我之前通过 npm 安装过 vega、vega-lite 和 vega-embed
<script>
import { onMount } from 'svelte';
import * as vega from "vega"
import * as vega-lite from "vega-lite"
import * as vegaEmbed from "vega-embed";
onMount(() => {
let yourVlSpec = {
$schema: 'https://vega.github.io/schema/vega-lite/v2.0.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>
<div id="vis"></div>
我希望简单地显示一个 vegalite 图,接下来我希望它从父组件获取其规格。
如果您直接在您的 index.html 或您的特定 HTML 中导入脚本,您的选项将起作用。
<script src="https://cdn.jsdelivr.net/npm/vega@5.4.0/build/vega.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@3.3.0/build/vega-lite.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@4.2.0/build/vega-embed.js"></script>
根据 https://github.com/vega/vega-embed/blob/v4.0.0/README.md 中的文档,npm 版本公开了一种不同的方法,即 embed
。检查自述文件中的 API 参考部分。
您可以按照
的方式尝试embed('#vis', yourVlSpec)
请注意,规范参数将字符串参数视为 URL,应该 return 和 JSON。所以如果你的规格是字符串,那么在调用 embed
函数之前做一个 JSON.parse(yourSpec)
会很好。
我在 angular 项目中就是这样做的。注意:以下是使用打字稿的特定示例.. :D
- 首先从您那里导入嵌入功能node_modules。
import {default as embed} from 'vega-embed
; - 然后在我组件内的一个函数中我调用了
embed
方法。 - 在我的例子中,它是在组件初始化期间调用的 ngOnInit。
ngOnInit() {
// option 1: using a string spec.
let spec = `{
"$schema": "https://vega.github.io/schema/vega-lite/v3.json",
"description": "Simple bar chart",
"data": {
"values": [
{"x": "A", "y": 28}, {"x": "y", "B": 55}, {"x": "C", "y": 43},
{"x": "D", "y": 91}, {"x": "E", "y": 81}, {"x": "F", "y": 53},
{"x": "G", "y": 19}, {"x": "H", "y": 87}, {"x": "I", "y": 52}
]
},
"mark": "bar",
"encoding": {
"x": {"field": "x", "type": "ordinal"},
"y": {"field": "y", "type": "quantitative"}
}
}`;
embed("#vis", "/assets/data/spec2.json", { actions: false }).catch(error =>
console.log(error)
);
// option 2: where the spec is saved as a json file in my project assets.
embed("#vis2", JSON.parse(spec), { actions: false }).catch(error =>
console.log(error)
);
}
我无法使用 rollup,所以 @theWebalyst 建议我切换到 webpack。这里有一个模板:https://github.com/sveltejs/template-webpack
类似
<script>
import {default as vegaEmbed} from 'vega-embed';
export let name;
var spec = "https://raw.githubusercontent.com/vega/vega/master/docs/examples/bar-chart.vg.json";
vegaEmbed("#viz", spec, { actions: false }).catch(error => console.log(error) );
</script>
安装官方 svelte-vega
包。
它同时支持 Vega 和 Vega-Lite 组件。
npm install svelte-vega
按照此处的说明进行操作:https://github.com/vega/svelte-vega。