使用python-flask应用程序的heroku上没有显示高图

highcharts not showing on heroku using python flask app

本文关键字：显示 高图 heroku python-flask 应用程序 使用      更新时间：2023-09-26

我创建了一个html，它使用highcharts可视化一些数据。当在localhost上使用此html时，我可以成功地看到我的图表。但当我在heroku上使用它时，我不会得到我的图表。有什么想法吗？

<!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">
	<p></p>
</div>
<div id="container2" class="chart">
	<p></p>
</div>
<div id="container3" class="chart">
	<p></p>
</div>
<div id="container4" class="chart">
	<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:。我想这个问题与加载highcharts.js有关，但我不明白为什么

我注意到并纠正了一些事情：

  • 您的代码段没有起始<head>标记
  • 您在</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">
	<p></p>
</div>
<div id="container2" class="chart">
	<p></p>
</div>
<div id="container3" class="chart">
	<p></p>
</div>
<div id="container4" class="chart">
	<p></p>
</div>
<div id="container5" class="chart">
</div>
<div id="container7" class="chart">
<p>post message,video,photo etc.</p>
</div>
</body>
</html>

相关文章：