英文:
How to integrate vega chart to stencil js component?
问题
我正在尝试使用vega图表创建一个stencil js组件，根据vega手册，我安装了3个包：
npm install vega
npm install vega-lite
npm install vega-embed
并尝试导入
import { Vega } from 'vega'
但出现以下错误信息：
模块'“vega”'没有导出成员'Vega'
有人成功将vega图表集成到stencil js中吗？
提前感谢您！
英文:
I am trying to create a stencil js component using vega chart, according to vega manual i installed 3 packages:
npm install vega
npm install vega-lite
npm install vega-embed
and trying to import
import { Vega } from 'vega'
and get this.
>Module '"vega"' has no exported member 'Vega'
Did anyone manage to integrate vega chart into stencil js?
Thank you in advance!
答案1
得分: 2
根据使用文档：
> 在使用捆绑工具时使用 Vega。 如果您使用像 rollup.js 这样的捆绑工具，您可以将 Vega 作为模块导入。
>
> import * as vega from "vega";
请注意，如果您在启用了 Shadow DOM 的组件中使用它，您可能需要将 Vega 作为 container 配置的一部分传递给一个 DOM 节点，而不是一个 CSS 选择器：
class MyComponent {
container: HTMLDivElement;
componentDidLoad() {
new vega.View(vega.parse(spec), {
renderer: 'canvas', // 渲染器（canvas 或 svg）
container: this.container, // 父 DOM 容器
});
// ...
}
render() {
return <div ref={el => this.container = el}></div>
}
}
英文:
According to the usage docs:
> Using Vega with a bundler. If you use Vega with a bundler like rollup.js, you can import Vega as a module.
>
> import * as vega from "vega";
Note that if you're using it in a component with Shadow DOM enabled you will probably need to pass Vega, in the container configuration, a DOM node instead of a CSS selector:
class MyComponent {
container: HTMLDivElement;
componentDidLoad() {
new vega.View(vega.parse(spec), {
renderer: 'canvas', // renderer (canvas or svg)
container: this.container, // parent DOM container
});
// ...
}
render() {
return <div ref={el => this.container = el}></div>
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论