[英]react component using vega
I'm trying to use vega from a react component but without luck (might be installation problem). 我正在尝试从react组件中使用vega ,但是没有运气(可能是安装问题)。
I wrote a component with the following structure: 我编写了一个具有以下结构的组件:
import vega from 'vega';
class Chart extends React.PureComponent {
...
componentDidMount() {
vega.parse(...)
}
}
But I get a TypeError: Cannot read property 'parse' of undefined
但我收到
TypeError: Cannot read property 'parse' of undefined
This leads me to conclude that the installation did not go as expected. 这使我得出结论,安装未按预期进行。
During installation, I do have problems since vega uses node-gyp and I'm on a windows environment (and also behind a proxy) 在安装过程中,我确实遇到了问题,因为vega使用node-gyp并且我在Windows环境中(并且也在代理之后)
When installing node-gyp I got some problems with node-canvas (although according to the documents, vega should work without it) 安装node-gyp时,我遇到了node-canvas的一些问题(尽管根据文档,vega应该在没有它的情况下工作)
Most of the documents disregard the installation of vega. 大多数文档都忽略了vega的安装。
Has anyone tried installing it and using it with import
- does it work? 有没有人尝试安装它并与
import
一起使用-它起作用吗?
For anyone interested in this topic, it seems that the documentation is insufficient but here is how I got it to work: 对于对此主题感兴趣的任何人,似乎文档不足,但以下是我如何使其起作用的方法:
For installation, npm install vega
might be enough for you if you're not on windows or under a proxy. 对于安装,如果您不在Windows或代理下,则
npm install vega
可能就足够了。
If you do have problems, these steps helped me: 如果您确实有问题,这些步骤对我有帮助:
npm --add-python-to-path='true' install --global --production windows-build-tools
) npm --add-python-to-path='true' install --global --production windows-build-tools
) npm install node-gyp
npm install vega
As for usage, make sure that you get an example for the version of vega you intend to use (eg an example for vega 2 won't work on vega 3) 至于用法,请确保获得要使用的vega版本的示例(例如,针对vega 2的示例不适用于vega 3)
Alternative Approach: 替代方法:
So I am adding Vega charts to a react app and was having some problems getting vega charts to work "out of the box" even following this article . 因此,我将Vega图表添加到react应用程序中,即使遵循本文,也无法使vega图表“开箱即用”地工作。 I then discovered react-vega and it works great.
然后,我发现了react-vega ,效果很好。
Steps to get it to work: 使它工作的步骤:
npm install react vega-lib react-vega --save
create new react class : 创建新的react类:
import {createClassFromSpec} from 'react-vega'; export default createClassFromSpec('MyChart', { ...VEGA SPEC OBJ...});
use <MyChart data={mydata}>
as a standard react component. 使用
<MyChart data={mydata}>
作为标准的反应组件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.