2016-07-30 3 views
0

ハイチャートを使っていくつかのデータを視覚化するhtmlを作成しました。 localhostでこのhtmlを使用すると、私のチャートが正常に表示されます。しかし、私は英雄でそれを使用するとき私は私のチャートを取得しません。何か案は?ハイチャートはヒソクにPythonフラスコアプリを使って表示されていません

<!DOCTYPE html> 
 
<html> 
 

 
<base href="https://www.highcharts.com" /> 
 

 
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
 

 
<script src="/lib/jquery-1.7.2.js" type="text/javascript"></script> 
 

 
<script type="text/javascript"> 
 

 
</head> 
 
<body > 
 

 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
 
<script src="https://code.highcharts.com/modules/data.js"></script> 
 
<script src="https://code.highcharts.com/modules/drilldown.js"></script> 
 
<!--<div id="container" style="min-width: 310px; height: 0 auto; max-width: 600px; margin: 0 auto"></div>--> 
 

 
<!--<div id="container2" style="min-width: 310px; height: 0 auto; max-width: 600px; margin: 0 auto"></div>--> 
 

 
<div id="container6" class="text"> 
 
<p>info:about,category,location,website,founded</p> 
 
</div> 
 

 
<div id="container" class="chart"> 
 
\t <p></p> 
 
</div> 
 
<div id="container2" class="chart"> 
 
\t <p></p> 
 
</div> 
 
<div id="container3" class="chart"> 
 
\t <p></p> 
 
</div> 
 
<div id="container4" class="chart"> 
 
\t <p></p> 
 
</div> 
 
<div id="container5" class="chart"> 
 

 
</div> 
 

 
<div id="container7" class="chart"> 
 
<p>post message,video,photo etc.</p> 
 
</div> 
 
</body> 
 
</html>

私は、ローカルのモジュールをコピーまたはhttpsを課すようないくつかの解決策を試してみました:HTTPのinsted:リンクを。 私は問題がhighchartsの.jsファイルのロード関係していると仮定が、私は私が気づいて修正理由

+0

あなたは全体のDOMが最初にロードされるようにするには、ファイルの末尾にインラインJavaScriptを移動しようとしたことがありますか? – zeantsoi

+0

あなたが \t \t \t \t \t \t <スクリプトSRC = "https://code.highcharts.com/highcharts.js"> \t \t \t <スクリプトSRC = "HTTPSを移動させることを意味する場合://コード.highcharts.com /モジュール/ exporting.js "> \t \t \t <スクリプトSRC =" https://code.highcharts.com/modules/data.js "> \t \t \t <スクリプトSRC =" HTTPS ://code.highcharts.com/modules/drilldown.js ">コンテナの下の行、私は試しましたが動作しません – dimos

+0

コンテナコードの下でjavacriptの部分を正常に移動しませんでした – dimos

答えて

1

いくつか理解することはできません。

  • あなたのコードスニペットが開始<head>タグを持っていませんでしたが。
  • タグの直前に閉鎖されていない<script type="text/javascript">のインスタンスがありました。これによりUncaught SyntaxError: Unexpected token <エラーが発生しました。
  • すべてのスクリプト呼び出しを<head>タグの間で移動し、jQueryライブラリに絶対URLを与えました(スニペットでこれを動作させるため)。

コードスニペットを今実行すると、<p>タグに期待されるテキストが表示されます。グラフは表示されませんが、コードを作成するオプションは表示されません。

編集したコードスニペットは次のとおりです。

私はこれがあなたに役立つことを願っています。

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
<base href="https://www.highcharts.com" /> 
 

 
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
 

 
<!-- <script src="/lib/jquery-1.7.2.js" type="text/javascript"></script> --> 
 
<script src="https://code.jquery.com/jquery-1.7.2.js" type="text/javascript"></script> 
 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
 
<script src="https://code.highcharts.com/modules/data.js"></script> 
 
<script src="https://code.highcharts.com/modules/drilldown.js"></script> 
 

 
</head> 
 
<body > 
 

 
<!--<div id="container" style="min-width: 310px; height: 0 auto; max-width: 600px; margin: 0 auto"></div>--> 
 

 
<!--<div id="container2" style="min-width: 310px; height: 0 auto; max-width: 600px; margin: 0 auto"></div>--> 
 

 
<div id="container6" class="text"> 
 
<p>info:about,category,location,website,founded</p> 
 
</div> 
 

 
<div id="container" class="chart"> 
 
\t <p></p> 
 
</div> 
 
<div id="container2" class="chart"> 
 
\t <p></p> 
 
</div> 
 
<div id="container3" class="chart"> 
 
\t <p></p> 
 
</div> 
 
<div id="container4" class="chart"> 
 
\t <p></p> 
 
</div> 
 
<div id="container5" class="chart"> 
 

 
</div> 
 

 
<div id="container7" class="chart"> 
 
<p>post message,video,photo etc.</p> 
 
</div> 
 
</body> 
 
</html>

関連する問題