2017-03-06 30 views
1

amChartとMeteor + React(JSX)を使用しています。 私が直面している問題をレンダリングするチャートは、エクスポート機能が動作していないことです。amcharts Meteor + React(JSX)でエクスポート

私はブラウザに次のエラーメッセージが表示されます<!DOCTYPE html>

私は問題は道の流星負荷とは何かを持っていると信じて:私が見るものをファイルごとに1行目に

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 < 

ファイルはかなりわかりません。私が持っている私のコンポーネントの上部に

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

を何かアドバイスがはるかになるには、だから私はよく分からない

答えて

2

をappreaciatedそれがなぜ機能するのか?エクスポート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"; インポート '反応'から反応します。 'react-dom'からReactDOMをインポートします。 'amcharts3-react'からAmChartsをインポートします。 – eGlu

関連する問題