【发布时间】：2019-02-23 00:10:56
【问题描述】：
我正在创建一个 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>
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)
我现在看不到树木的树木，我想这是我忽略的基本东西。这是我目前正在使用的所有代码，我从一个更大的应用程序中删除了它，以便在发布问题时更清楚。
谢谢
【问题讨论】：
标签： javascript flask highcharts