Meteor应用程序在启动时崩溃，在fusioncharts模块上找不到窗口错误

Question

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

ReferenceError:窗口不是在行node_modules/react-fusioncharts/lib/ReactFC.js:13:21中定义的

整个代码都在client/import/ui/pages下，所以我不明白为什么要尝试查找窗口对象，而且在meteor的开头也是如此！

代码片段。

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;

​

Answer 1

要使用FusionCharts呈现图表，您需要首先导入fusioncharts库，然后导入要从中呈现的图表包的库文件，然后可以导入react-fusioncharts插件。下面是供您参考的代码片段

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'),
);