Question

我正在尝试使用反应组件中的vega，但没有运气（可能是安装问题）。

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

import vega from 'vega';

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

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

这使我得出结论，安装没有按预期进行。

在安装过程中，我确实遇到问题，因为vega使用node-gyp而且我在Windows环境中（也在代理服务器后面）

安装node-gyp时我遇到了node-canvas的一些问题（虽然根据文档，vega应该没有它）

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

是否有人尝试过安装并将其与import一起使用 - 它有效吗？

Answer 1

对于对此主题感兴趣的人，似乎文档不够充分，但以下是我如何使用它：

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

如果您确实遇到问题，这些步骤对我有帮助：

安装windows-build-tools（npm --add-python-to-path='true' install --global --production windows-build-tools）
npm install node-gyp
安装GTK2（参见https://github.com/Automattic/node-canvas/wiki/Installation---Windows#install-manually）
npm install vega

至于使用方法，请确保您获得了您打算使用的vega版本的示例（例如，vega 2的示例不适用于vega 3）

Answer 2

替代方法：

因此，我正在将Vega图表添加到react应用程序中，即使遵循了article，也无法使vega图表“开箱即用”地工作。然后，我发现了react-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}>作为标准反应组件。