2017-03-06 96 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