Я нахожусь в процессе создания приложения Flask, для элемента диаграммы, который я хочу использовать Highcharts, мне удалось получить один график для отображения на веб-странице, но как только я пытаюсь отобразить несколько графиков только один делает.
Я попробовал несколько вещей для начала, изменив имена переменных, проверил построчный код, чтобы увидеть, есть ли проблема с одной диаграммой. Закомментировал один график, а затем другой, чтобы убедиться, что они оба работают. Наконец, я проверил скрипт в Chrome, чтобы увидеть, что возвращается, все выглядит хорошо.
Я считаю, что проблема в моем объявлении переменной в моем элементе script. Если я оставлю это как 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)
Я не могу видеть дерево для деревьев с этим в данный момент, я думаю, что это что-то основное, что я пропускаю. Это весь код, с которым я работаю в данный момент, я удалил его из более крупного приложения, чтобы сделать его более понятным при публикации вопроса.
Спасибо