使用 vega 反应组件答案

【问题标题】：react component using vega使用 vega 反应组件
【发布时间】：2018-02-17 10:35:12
【问题描述】：

我正在尝试使用来自 react 组件的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 一起使用 - 是否有效？

【问题讨论】：

【解决方案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）

【讨论】：

【解决方案2】：

替代方法：

因此，我正在将 Vega 图表添加到 React 应用程序中，并且即使遵循此 article，在让 vega 图表“开箱即用”工作时也遇到了一些问题。然后我发现了react-vega，效果很好。

使其工作的步骤：

npm install react vega-lib react-vega --save
创建新的反应类：

import {createClassFromSpec} from 'react-vega'; export default createClassFromSpec('MyChart', { ...VEGA SPEC OBJ...});
使用<MyChart data={mydata}> 作为标准反应组件。

【讨论】：