Как показать всплывающие графики Folium HTML Plotly на Flask? (Питон)

Я хочу развернуть приложения веб-карты, содержащие несколько точек и графики Plotly в виде всплывающего окна. Все в порядке, пока я не захочу развернуть свои приложения веб-карты в Flask, и когда я нажимаю точку, всплывающее окно показывает сообщение об ошибке:

Запрошенный URL-адрес не найден на сервере. Если вы ввели URL вручную проверьте правильность написания и повторите попытку.

Вот всплывающий код

#make a dataframe which is used for plotting the well head point in folium
df_point = pd.DataFrame(list(zip(wells, html_list, Longitude, Latitude)), columns =['Well_Name', 'HTML_list', 'Longitude', 'Latitude'])

#Start plotting well head in map with well log plot as a pop up widget
for i in range(0,len(df_point)):
    html = """
    <iframe src=\"""" + df_point['HTML_list'][i] + """\" width = "700" height = "800"  frameborder = "0">    
    """)
    
    popup = folium.Popup(folium.Html(html, script=True))
    
#     #Cirlce marker ver.
#     folium.CircleMarker([df_point['Latitude'].iloc[i],df_point['Longitude'].iloc[i]],
#                         popup=popup,radius=3.5,opacity=1,color='#ccd132').add_to(map1)
    
    #Marker with icon ver.
    folium.Marker([df_point['Latitude'].iloc[i],df_point['Longitude'].iloc[i]],
                  popup=popup,icon=folium.Icon( icon='glyphicon-pushpin')).add_to(map1)

Я помещаю файл HTML, координаты и имя в фрейм данных, который называется df_point, вот фреймы данных

    Well_Name    HTML_list      Longitude   Latitude
0   Well 1F   figWell 1F.html   96.083956   5.456862
1   Well 2F   figWell 2F.html   96.356427   5.328133

а вот и моя фляга app.py

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def render_the_map():
    return render_template('testing_map.html')

if __name__ == '__main__':
    app.run(debug=True)

а также вот путь, если кому-то нужна информация о моем пути к файлу

Как поместить графики Plotly в формате HTML в виде всплывающего окна на Flask? Я все еще новичок в разработке Flask. Любая помощь, я был бы признателен, спасибо!

Я чувствую, что вы неправильно поняли использование HTML-тега <iframe>, из того, что я могу сказать, вы передаете фрейм данных в качестве источника src = "XX + df_point['HTML_list'][i] + XX. Ферма данных просматривает источник HTML-кода, а вы передаете необработанные данные. Что вы можете сделать, так это создать новый маршрут в Flask, который возвращает код HTML, отображающий ваш график, и использовать url_for('plot_view') в качестве параметра src в коде iframe.

Sebastian Salinas Del Rio 25.01.2023 14:33

Можете ли вы привести пример того, как создать новый маршрут в Flask, который возвращает HTML-код, и использовать url_for('plot_view') в коде iframe? Я действительно новичок в Flask, и ваш комментарий меня смущает, спасибо за ответ! @СебастьянСалинасДельРио

naranara 26.01.2023 03:21

Неважно, я нашел решение, я попытался найти в Google, что вы имеете в виду, и это работает! большое спасибо, чувак @SebastianSalinasDelRio

naranara 26.01.2023 05:11
Почему в Python есть оператор "pass"?
Почему в Python есть оператор "pass"?
Оператор pass в Python - это простая концепция, которую могут быстро освоить даже новички без опыта программирования.
Некоторые методы, о которых вы не знали, что они существуют в Python
Некоторые методы, о которых вы не знали, что они существуют в Python
Python - самый известный и самый простой в изучении язык в наши дни. Имея широкий спектр применения в области машинного обучения, Data Science,...
Основы Python Часть I
Основы Python Часть I
Вы когда-нибудь задумывались, почему в программах на Python вы видите приведенный ниже код?
LeetCode - 1579. Удаление максимального числа ребер для сохранения полной проходимости графа
LeetCode - 1579. Удаление максимального числа ребер для сохранения полной проходимости графа
Алиса и Боб имеют неориентированный граф из n узлов и трех типов ребер:
Оптимизация кода с помощью тернарного оператора Python
Оптимизация кода с помощью тернарного оператора Python
И последнее, что мы хотели бы показать вам, прежде чем двигаться дальше, это
Советы по эффективной веб-разработке с помощью Python
Советы по эффективной веб-разработке с помощью Python
Как веб-разработчик, Python может стать мощным инструментом для создания эффективных и масштабируемых веб-приложений.
0
3
53
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я нашел решение, основанное на ответе Себастьяна, если кто-то хочет создать карту Folium и всплывающий маркер, показывающий сюжетный html в Flask, вот как это сделать

сначала в app.py составить маршрут сюжетного сюжета

from flask import Flask, render_template
app = Flask(__name__)

@app.route('/')
def render_the_map():
    return render_template('testing_map.html')

@app.route('/figure1')
def figure_plotly1():
    return render_template('figWell 1F.html')

@app.route('/figure2')
def figure_plotly2():
    return render_template('figWell 2F.html')

if __name__ == '__main__':
    app.run(debug=True)

а затем найдите свой сюжетный код в html-карте фолиума и измените источник iframe на определенный маршрут, например, имя моего сюжетного html-графа figWell 1F.html, попробуйте нажать ctrl+F на основной HTML-карте фолиума и изменить источник iframe. быть таким

<iframe src = "{{url_for('figure_plotly1')}}" width = "700" height = "800"

и это работает как шарм

Другие вопросы по теме