用流星+ React（JSX）导出amcharts

Question

I am using Meteor + React(JSX) with amCharts. 我正在使用带有amCharts的Meteor + React（JSX）。 I have the charts rendering the issue I am facing is that the export functionality is not working. 我的图表呈现了我面临的问题是导出功能无法正常工作。

I receive the following error messages in the browser: 我在浏览器中收到以下错误消息：

fabric.min.js:1 Uncaught SyntaxError: Unexpected token <
jszip.min.js:1 Uncaught SyntaxError: Unexpected token <
FileSaver.min.js:1 Uncaught SyntaxError: Unexpected token <
xlsx.min.js:1 Uncaught SyntaxError: Unexpected token <

On line 1 for each of those files I see: <!DOCTYPE html> 在每个文件的第1行上，我看到： <!DOCTYPE html>

I believe the issue has something to do with the way meteor loads the files but am not quite sure. 我相信问题与流星加载文件的方式有关，但不确定。

At the top of my component I have: 在组件的顶部，我有：

import "amcharts3-export";
import React from 'react';
import ReactDOM from 'react-dom';
import AmCharts from 'amcharts3-react';

The amCharts config looks as following: amCharts配置如下所示：

const config = {
            "type": "serial",
            "theme": "light",
            "categoryField": "year",
            "valueAxes": [
                {
                  "id": "ValueAxis-1",
                  "title": "Payback"
                }
            ],
            "animation": false,
            "graphs": 
                  [{
                      "type": "smoothedLine",
                      "balloonText": "[[title]] of [[year]]:[[value]]",
                      "bullet": "round",
                      "id": "AmGraph-1",
                      "title": "graph 1",
                      "valueField": "value",
                      "fillColorsField": "lineColor",
                      "lineColorField": "lineColor",
                      "fillAlphas": 0.3,
                  }],
            "dataProvider": this.state.lineItems,
            "export": {
              "enabled": true,
              "libs": { 
                "autoLoad": false,
                "path": "../libs/" 
              },
              "menu": [{
                "class": "export-main",
                "menu": [ "JPG" ]
              }]
            }
        }

Any advice would be much appreaciated 任何建议将不胜感激

Answer 1

So I'm not sure why it works. 因此，我不确定为什么会起作用。 I copied the export js files into public/libs folder. 我将导出js文件复制到public / libs文件夹中。 Which did take away the errors but not sure why and if duplicate copies of the js will be bundled - will need to investigate. 哪些确实消除了错误，但不确定为什么以及是否将重复的js捆绑在一起-需要进行调查。 For the export component to work I then have these imports: 为了使出口组件正常工作，我需要进行以下进口：

import 'amcharts3-export';
import 'amcharts3-export/export.css';
import AmCharts from 'amcharts3-react';

And I render the chart with: 我用以下方式绘制图表：

render () {
        return (
            <div id={this.props.tileid} style={{width: '100%', height: this.props.height.toString()+'px'}} >
                <AmCharts.React
                    ref="chartref"
                    {...this.chart}
                    dataProvider={this.props.data}
                    key={this.props.tile._id}
                />
            </div>
        );

where this.chart is my chart setup obj. 其中this.chart是我的图表设置对象。

This chart obj should have: 此图表obj应该具有：

"export": {
        "enabled": true,
        "libs": { "path": "/libs/" },
        ...
 }

I also import 'amcharts3/amcharts/gauge.js'; 我也导入了'amcharts3 / amcharts / gauge.js'; when working with other chart types. 使用其他图表类型时。

用流星+ React（JSX）导出amcharts

问题描述

1 个解决方案

解决方案1
2 已采纳 2017-03-09 07:42:05

用流星+ React（JSX）导出amcharts

问题描述

1 个解决方案

解决方案1 2 已采纳 2017-03-09 07:42:05

解决方案1
2 已采纳 2017-03-09 07:42:05