我正在创建Flask应用程序，对于要使用Highcharts的图表元素，我设法将一个图表显示在网页上，但是一旦我尝试显示多个图表，就只能显示一个渲染图。
我已经尝试了很多方法来开始，更改变量名称，逐行检查代码，以查看一张图表是否存在问题。注释掉一个图表，然后注释另一个图表，以确保它们都能正常工作。最后，我检查了Chrome中的脚本，看看返回了什么，一切看起来都很好。
我相信问题出在脚本元素中的变量声明中。如果我都将其保留为chart_id，则我认为第一个图表将被覆盖，但是如果将var更改为chart_id1和chart_id2，则没有任何图表返回？
我试图将“ div id = {{chart1ID | safe}}”下的所有变量标记为chart1_id，series1等....，并将“ id = {{chart2ID | safe}}”下的所有变量标记为2。我检查了Chrome中的代码，所有内容看起来都可以正确返回，但是没有图表呈现。
.../static/main.js
$(document).ready(function() {
$(chart1_id).highcharts({
chart1: chart1,
title1: title1,
xAxis1: xAxis1,
yAxis1: yAxis1,
series1: series1
})
});
$(document).ready(function() {
$(chart2_id).highcharts({
chart2: chart2,
title2: title2,
xAxis2: xAxis2,
yAxis2: yAxis2,
series2: series2
})});
的HTML
..../templates/index.html
<body>
<div id={{ chart1ID|safe }} class="chart1" style="height: 500px; width: 500px">
<script>
var chart_id = {{ chart1ID|safe }}
var series = {{ series1|safe }}
var title = {{ title1|safe }}
var xAxis = {{ xAxis1|safe }}
var yAxis = {{ yAxis1|safe }}
var chart = {{ chart1|safe }}
</script>
</div>
<br>
<P>***********************************************************************************</P>
<div id={{ chart2ID|safe }} class="chart2" style="height: 500px; width: 500px">
<script>
var chart_id = {{ chart2ID|safe }}
var series = {{ series2|safe }}
var title = {{ title2|safe }}
var xAxis = {{ xAxis2|safe }}
var yAxis = {{ yAxis2|safe }}
var chart = {{ chart2|safe }}
</script>
</div>
<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="../static/main.js"></script>
</body>
蟒蛇
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
@app.route('/index')
def index(chart1ID = 'chart1_ID', chart1_type = 'line', chart1_height = 500, chart2ID = 'chart2_ID', chart2_type = 'line', chart2_height = 500):
chart1 = {"renderTo": chart1ID, "type": chart1_type, "height": chart1_height,}
series1 = [{"name": 'Label1', "data": [1,2,3]}, {"name": 'Label2', "data": [9, 10, 11]}]
title1 = {"text": 'Chart 1 Title'}
xAxis1 = {"categories": ['xAxis Data1', 'xAxis Data2', 'xAxis Data3']}
yAxis1 = {"title": {"text": 'yAxis Label'}}
chart2 = {"renderTo": chart2ID, "type": chart2_type, "height": chart2_height,}
series2 = [{"name": 'Label1', "data": [1,2,3]}, {"name": 'Label2', "data": [14, 15, 20]}]
title2 = {"text": 'Second Chart Title'}
xAxis2 = {"categories": ['xAxis Data1', 'xAxis Data2', 'xAxis Data3']}
yAxis2 = {"title": {"text": 'yAxis Label'}}
return render_template('index.html',
chart1ID=chart1ID, chart1=chart1, series1=series1, title1=title1, xAxis1=xAxis1, yAxis1=yAxis1,
chart2ID=chart2ID, chart2=chart2, series2=series2, title2=title2, xAxis2=xAxis2, yAxis2=yAxis2)
if __name__ == "__main__":
app.run(debug = True)
目前我无法看到树木所需要的树木，我想这是我所忽略的基本事物。这就是我目前正在使用的所有代码，我从一个较大的应用程序中将其删除，以便在发布问题时更加清楚。
谢谢
最佳答案
您所需要做的就是将HTML文档中的var更改为var series1，title1等。
我的工作代码：
HTML：
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<meta charset="utf-8">
{% block head %}
<title>{% block title %}Title!{% endblock %}</title>
{% endblock %}
</head>
<body>
<div id={{ chart1ID|safe }} class="chart1" style="height: 500px; width: 1000px"></div>
<script>
var chart1_id = {{ chart1ID|safe }}
var series1 = {{ series1|safe }}
var title1 = {{ title1|safe }}
var xAxis1 = {{ xAxis1|safe }}
var yAxis1 = {{ yAxis1|safe }}
var chart1 = {{ chart1|safe }}
</script>
<div id={{ chart2ID|safe }} class="chart2" style="height: 500px; width: 1000px">
<script>
var chart2_id = {{ chart2ID|safe }}
var series2 = {{ series2|safe }}
var title2 = {{ title2|safe }}
var xAxis2 = {{ xAxis2|safe }}
var yAxis2 = {{ yAxis2|safe }}
var chart2 = {{ chart2|safe }}
</script>
</div>
<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="../static/js/graph.js"></script>
</body>
JavaScript：
$(document).ready(function() {
$(chart1_id).highcharts({
chart: chart1,
title: title1,
xAxis: xAxis1,
yAxis: yAxis1,
series: series1
});
});
$(document).ready(function() {
$(chart2_id).highcharts({
chart: chart2,
title: title2,
xAxis: xAxis2,
yAxis: yAxis2,
series: series2
})});
和Python：
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
@app.route('/index')
def index(chart1ID = 'chart1_ID', chart1_type = 'line', chart1_height = 500,
chart2ID = 'chart2_ID', chart2_type = 'line', chart2_height = 500):
chart1 = {"renderTo": chart1ID, "type": chart1_type, "height": chart1_height,}
series1 = [{"name": 'Label1', "data": [1,2,3]}, {"name": 'Label2', "data": [9, 10, 11]}]
title1 = {"text": 'Chart 1 Title'}
xAxis1 = {"categories": ['xAxis Data1', 'xAxis Data2', 'xAxis Data3']}
yAxis1 = {"title": {"text": 'yAxis Label'}}
chart2 = {"renderTo": chart2ID, "type": chart2_type, "height": chart2_height,}
series2 = [{"name": 'Label1', "data": [1,2,3]}, {"name": 'Label2', "data": [14, 15, 20]}]
title2 = {"text": 'Second Chart Title'}
xAxis2 = {"categories": ['xAxis Data1', 'xAxis Data2', 'xAxis Data3']}
yAxis2 = {"title": {"text": 'yAxis Label'}}
return render_template('index.html', chart1ID=chart1ID, chart1=chart1, series1=series1, title1=title1, xAxis1=xAxis1, yAxis1=yAxis1, chart2ID=chart2ID, chart2=chart2, series2=series2, title2=title2, xAxis2=xAxis2, yAxis2=yAxis2)
if __name__ == "__main__":
app.run(debug = True, host='127.0.0.1', port=5000, passthrough_errors=True)
当您尝试复制此Python代码时，请记住在变量之前设置等号格式（例如，每个变量之前的一个制表符-[tab] chart1 = {...} [tab] series1 = {...}等）。