2017-03-06 97 views
1

我使用流星+反应(JSX)与amCharts。 我有图表呈现我面临的问题是导出功能无法正常工作。amcharts导出流星+反应(JSX)

我收到以下错误消息在浏览器中:

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 < 

线1为每个我看到的文件:<!DOCTYPE html>

我相信这个问题有事情做与方式流星负载这些文件,但我不太确定。

在我的组件的顶部,我有:

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

的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" ] 
       }] 
      } 
     } 

任何意见将非常appreaciated

回答

2

所以我不知道它为什么有效。我将导出的js文件复制到public/libs文件夹中。哪些确实带走了错误,但不知道为什么以及是否将js的重复副本捆绑在一起 - 将需要进行调查。对于出口组件工作,我再有这些进口:

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

我呈现图表用:

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

其中this.chart是我的图表设置OBJ。

这个图表的obj应该有:

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

我还进口 'amcharts3/amcharts/gauge.js';当使用其他图表类型时。

+0

嘿,谢谢你的回复。 当你说你将文件复制到public/libs文件夹时,你是否将整个amcharts3-export文件夹复制到root/public/libs或只有特定文件?你是否也从node_modules中删除了amchart3-export模块? – eGlu

+0

是将'root/node_modules/amcharts3-export/libs/*'中的所有文件夹和文件复制到'root/public/libs/*'中。我也有'node_modules'中的文件,我认为它只是根据需要加载,因为如果我没有弄错,公共文件夹中的文件将作为资产提供。 –

+0

我的确如此。尽管如此,仍然有同样的错我在图形组件中有这些导入: import“amcharts3-export”; import从'react'反应; 从'react-dom'导入ReactDOM; 从'amcharts3-react'导入AmCharts; – eGlu