使用vega的react组件

Question

我试图从react组件中使用维加，但没有成功(可能是安装问题)。

我编写了一个具有以下结构的组件：

import vega from 'vega';

class Chart extends React.PureComponent {
...
  componentDidMount() {
    vega.parse(...)
  }
}

但我得到了一个TypeError: Cannot read property 'parse' of undefined

这使我得出结论，安装工作并没有像预期的那样进行。

在安装过程中，我确实遇到了问题，因为vega使用的是node，而且我在windows环境(以及代理后面)。

在安装节点-gyp时，我遇到了一些节点-画布的问题(尽管根据文档，vega应该没有它就可以工作)。

大多数文件都忽略了vega的安装。

有人试过安装它并与import一起使用它吗？

Answer 1

对于任何对这个主题感兴趣的人来说，文档似乎是不够的，但下面是我如何让它工作的方法：

对于安装而言，如果您不在windows或代理下，npm install vega可能就足够了。

如果你确实有问题，这些步骤帮助了我：

1. 安装windows构建工具(npm --add-python-to-path='true' install --global --production windows-build-tools)
2. npm install node-gyp
3. 安装GTK2 (参见https://github.com/Automattic/node-canvas/wiki/Installation---Windows#install-manually)
4. npm install vega

至于用法，请确保您得到了要使用的vega版本的示例(例如，vega 2的示例不适用于vega 3)

Answer 2

备选办法：

因此，我正在添加织女星图表到一个反应应用程序，并有一些问题，让织女星图表工作“开箱”，甚至跟踪这个文章。然后我发现了反应-vega，它工作得很好。

让它发挥作用的步骤：

• npm install react vega-lib react-vega --save
• 创建新的react类： import {createClassFromSpec} from 'react-vega'; export default createClassFromSpec('MyChart', { ...VEGA SPEC OBJ...});
• 使用<MyChart data={mydata}>作为标准的反应组件。