Meteor 应用程序在启动时崩溃，并在 fusioncharts 模块上找不到 Window 错误答案

【问题标题】：Meteor app crashing on startup with Window not found error on fusioncharts moduleMeteor 应用程序在启动时崩溃，并在 fusioncharts 模块上找不到 Window 错误
【发布时间】：2019-02-24 19:17:40
【问题描述】：

一旦我从 Fusioncharts 添加了一个图表作为新依赖项并尝试启动应用程序，它会引发以下错误并中止

ReferenceError: 未定义窗口从行 node_modules/react-fusioncharts/lib/ReactFC.js:13:21

这整个代码我们在 client/imports/ui/pages 下，所以我不明白为什么要尝试寻找窗口对象，而且在流星开始时也是如此！！

代码 sn-p。

import ReactFusioncharts from "react-fusioncharts";

class DashBoard extends Component {
  constructor(props) {
    super(props);

  }

  dataSource= {
      // Chart Configuration
      "chart": {
          "caption": "Countries With Most Oil Reserves [2017-18]",
          "subCaption": "In MMbbl = One Million barrels",
          "xAxisName": "Country",
          "yAxisName": "Reserves (MMbbl)",
          "numberSuffix": "K",
          "theme": "fusion",
        },
        // Chart Data
        "data": [{
            "label": "Venezuela",
            "value": "290"
        }, {
            "label": "Saudi",
            "value": "260"
        }, {
            "label": "Canada",
            "value": "180"
        }, {
            "label": "Iran",
            "value": "140"
        }, {
            "label": "Russia",
            "value": "115"
        }, {
            "label": "UAE",
            "value": "100"
        }, {
            "label": "US",
            "value": "30"
        }, {
            "label": "China",
            "value": "30"
        }]
    };

  render() {
    return(    <ReactFusioncharts
      type="column2d"
      width="700"
      height="500"
      dataFormat="JSON"
      dataSource={this.dataSource}
    />
  )
  }
}



export default DashBoard;

【问题讨论】：

标签： javascript reactjs meteor fusioncharts meteor-react

【解决方案1】：

为了使用 FusionCharts 渲染图表，您需要先导入 fusioncharts 库，然后导入您尝试渲染的图表包中的库文件，然后您可以导入 react-fusioncharts 插件这里是下面的代码 sn-p供大家参考

import React from 'react';
import ReactDOM from 'react-dom';
import FusionCharts from 'fusioncharts';
import Charts from 'fusioncharts/fusioncharts.charts';
import ReactFC from 'react-fusioncharts';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';

ReactFC.fcRoot(FusionCharts, Charts, FusionTheme);

const myDataSource = {
  "chart": {
    "caption": "Countries With Most Oil Reserves [2017-18]",
    "subCaption": "In MMbbl = One Million barrels",
    "xAxisName": "Country",
    "yAxisName": "Reserves (MMbbl)",
    "numberSuffix": "K",
    "theme": "fusion"
  },
  "data": [
    {
      "label": "Venezuela",
      "value": "290"
    },
    {
      "label": "Saudi",
      "value": "260"
    },
    {
      "label": "Canada",
      "value": "180"
    },
    {
      "label": "Iran",
      "value": "140"
    },
    {
      "label": "Russia",
      "value": "115"
    },
    {
      "label": "UAE",
      "value": "100"
    },
    {
      "label": "US",
      "value": "30"
    },
    {
      "label": "China",
      "value": "30"
    }
  ]
};

const chartConfigs = {
    type: 'column2d',
    width: 600,
    height: 400,
    dataFormat: 'json',
    dataSource: myDataSource,
};

ReactDOM.render(
    <ReactFC {...chartConfigs} />,
    document.getElementById('root'),
);

【讨论】：