javascript - 使用 vega 反应组件

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- 它有效吗？

score 1 · Accepted Answer

对于任何对此主题感兴趣的人，似乎文档不足，但这是我如何让它工作的：

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

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

安装 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）

score 1 · Accepted Answer

替代方法：

因此，我正在将 Vega 图表添加到一个反应应用程序中，并且即使在这篇文章之后，让 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}>标准反应组件。

2 回答 2