2016-05-24 3 views
0

Pandas_Highchartsライブラリでハイチャートを表示する際に問題が発生しています。 JSONの入力などで何時間も遊んでいましたが、グラフを表示することはできません。パンダハイチャート - フラスコ付きチャートを表示

ブラウザに/ graphをロードするたびに、「Test」というテキストが表示されますが、グラフは表示されません。

<html> 
<link rel="stylesheet" media="screen" href = "/static/bootstrap.min.css"> 
<meta name="viewport" content = "width=device-width, initial-scale=1.0"> 
<head> 
<script type="text/javascript" src="http://ff.kis.scr.kaspersky-labs.com/1B74BD89-2A22-4B93-B451-1C9E1052A0EC/main.js" charset="UTF-8"></script></head> 

<body> 
    <p> Test </p> 
    <div id="my-chart"></div> 
    <script type="text/javascript"> 
     new Highcharts.Chart({"series":[{"data":[[1462838400000,2158372.6420299998],[1462752000000,1438419.8610100001],[1462665600000,667993.263726],[1462579200000,1825474.7086099999],[1462492800000,1908047.6404200001], [1304985600000,228989.8988]],"name":"Value","yAxis":0}],"yAxis":[{}],"chart":{"renderTo":"my-chart"},"xAxis":{"type":"datetime","title":{"text":"Date"}},"legend":{"enabled":true}}); 
    </script> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
     <script src="http://code.highcharts.com/highcharts.js"></script> 
     <script src="http://code.highcharts.com/modules/exporting.js"></script>  
</body> 

</body> 
<script type = "text/javascript" src = "/static/bootstrap.min.js"></script> 
</html> 

パンダHigcharts:https://github.com/gtnx/pandas-highcharts をそれはすべてがとてもシンプルに見えますが、なぜできこれに(私は間隔を遵守するためのデータでは、さまざまなエントリを編集した)ページのソースリードを見てFirefoxを使用して、

私はそれをgrrの仕事にしません。

次のコードが動作しなくなった理由を私は理解していない: マイ関連graph.htmlページを:

<html> 
<link rel="stylesheet" media="screen" href = "/static/bootstrap.min.css"> 
<meta name="viewport" content = "width=device-width, initial-scale=1.0"> 
<head> 
</head> 

<body> 
    <p> Test </p> 
    <div id="my-chart"></div> 
    <script type="text/javascript"> 
     new Highcharts.Chart({{chart|safe}}); 
    </script> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
     <script src="http://code.highcharts.com/highcharts.js"></script> 
     <script src="http://code.highcharts.com/modules/exporting.js"></script>  
</body> 

</body> 
<script type = "text/javascript" src = "/static/bootstrap.min.js"></script> 
</html> 

マイフラスコのpythonファイルが関連の@ app.route( '/グラフ')

が含まれています
from flask import Flask, render_template, request 
import pandas as pd 
import pandas_highcharts.core 

app = Flask(__name__) 

@app.route('/graph') 
def graph_Example(chartID = 'chart_ID', chart_type = 'line', chart_height = 500): 
    df = pd.read_csv('csv/BCHAIN-TRVOU-BitcoinUSDExchangeTradeVolume.csv', index_col='Date', parse_dates='Date') 
    dataSet = pandas_highcharts.core.serialize(df, render_to='my-chart', output_type='json') 
    return render_template('graph.html', chart=dataSet) 

一般に、私はPandasを使用して生成されたさまざまなDataFramesを持っています。私の問題は今、HighChartsのもので単にそれらを表示できるだけです。 私のCSVファイルもここにあります:https://drive.google.com/open?id=0B8xdmDmZgtJbVkhCcjZkZUhaajg 本質的には、それぞれのCSVファイルをグラフ化し、他のもの(例えば、USD価格対トータルビットコイン)のグラフを描きたいと思います。それが私のPandas DataFrame使用の理由です。

任意の助けいただければ幸いです:)

+0

間違っているのですか?エラーメッセージまたは間違った出力を表示します。 –

+0

内部サーバーエラーメッセージ。フラスコでpandas_highchartsを正しく実装するためのガイドラインのヘルプが必要です。私はそうする正しい方法を理解していないようです。 – TehNewbie

+0

Flaskアプリケーションをデバッグモード( 'app.run()'ではなく 'app.run(debug = True)')で実行し、もう一度やり直して完全なトレースバックを貼り付けます。 –

答えて

3

あなたはそれを使用する前にはJavaScriptファイルHighChartsを含める必要があります。 <script src="http://code.highcharts.com/highcharts.js"></script>あなたがチャートを作成するスクリプトタグの前に来ること

<html> 
    <head> 
     <link rel="stylesheet" media="screen" href = "/static/bootstrap.min.css"> 
     <meta name="viewport" content = "width=device-width, initial-scale=1.0"> 
     <script type="text/javascript" src="http://ff.kis.scr.kaspersky-labs.com/1B74BD89-2A22-4B93-B451-1C9E1052A0EC/main.js" charset="UTF-8"></script> 
    </head> 

    <body> 
     <p> Test </p> 
     <div id="my-chart"></div> 
     <script type = "text/javascript" src = "/static/bootstrap.min.js"></script> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
     <script src="http://code.highcharts.com/highcharts.js"></script> 
     <script src="http://code.highcharts.com/modules/exporting.js"></script> 
     <script type="text/javascript"> 
      new Highcharts.Chart({"series":[{"data":[[1462838400000,2158372.6420299998],[1462752000000,1438419.8610100001],[1462665600000,667993.263726],[1462579200000,1825474.7086099999],[1462492800000,1908047.6404200001], [1304985600000,228989.8988]],"name":"Value","yAxis":0}],"yAxis":[{}],"chart":{"renderTo":"my-chart"},"xAxis":{"type":"datetime","title":{"text":"Date"}},"legend":{"enabled":true}}); 
     </script> 
    </body> 
</html> 

注:ここでは上から、しかし、再配置スクリプトタグを使用してファイルです。

-2

これは動作するようです:

parse_dates = True 
関連する問題