Как показать графики из программы Python на сайт?
У меня есть файл Python, который строит графики. Я хочу импортировать этот файл на веб-страницу, которую я хочу сделать. Какой инструмент будет лучше сделать эту веб-страницу. Должно быть, когда я нажимаю какую-то кнопку, график появляется в div, iframe или другой всплывающей странице.
Следующий код создает график. Я хочу показать график на сайте
import pandas as pd
import dateutil
def gen(file,data):
lists = pd.read_csv(file)
lists['obstime'] = lists['obstime'].apply(dateutil.parser.parse, dayfirst=True)
lists = lists[lists[data] > -273]
daily_avg_temp = lists.set_index('obstime').groupby(pd.Grouper(freq='D'))[data].mean()
monthly_avg_temp = daily_avg_temp.groupby(pd.Grouper(freq='M')).mean()
monthly_avg_temp.plot()
gen(file_name,d)
Решение
Вы можете сохранить сюжет в виде файла BytesIO поток, затем с помощью send_file функция от колба Вы можете отправить его клиенту для визуализации.
from io import BytesIO
import pandas as pd
from flask import Flask, send_file
@app.route('/plot')
def plot():
# your pandas code goes here ...
plot = df.plot()
stream = BytesIO()
plot.figure.savefig(stream)
stream.seek(0)
return send_file(stream, mimetype='image/png')
app.run(debug=True, port=8000)
Другие решения
Я не уверен, что это лучший способ отобразить график на веб-странице, но я бы использовал библиотеку диаграмм JavaScript, например Chart.js построить ваши данные. Диаграмма будет отзывчивой и динамичной: простое нажатие кнопки с запросом AJAX изменит график.
Например, вы можете построить ежемесячные транзакции следующим образом (здесь я использую Jinja 2 для получения данных):
HTML
<div class="card border-primary">
<div class="card-header">
<h4 class="card-title text-primary">Monthly transactions</h4>
</div>
<div class="card-body">
<canvas id="transactions-chart" width="600" height="400" aria-label="transactions-chart" role="img"></canvas>
</div>
</div>
JAVASCRIPT
<script>
// Global parameters:
Chart.defaults.global.responsive = true;
// Define the chart data
var chartDataMonth = {
labels: [{% for item in days_labels %}"{{ item }}", {% endfor %}],
datasets: [{
label: 'Amount paid',
fill: false,
backgroundColor: "#dc3545",
borderColor: "#dc3545",
data: [{% for item in paid_this_month %}{{ '%0.2f'| format(item|float) }}, {% endfor %}],
},
{
label: 'Amount topped up',
fill: false,
backgroundColor: "#007bff",
borderColor: "#007bff",
data: [{% for item in topped_this_month %}{{ '%0.2f'| format(item|float) }}, {% endfor %}],
}]
};
// Get chart canvas
var ctx = document.querySelector('#transactions-chart').getContext('2d');
// Create the chart using the chart canvas
var transactionsChart = new Chart(ctx, {
type: 'line',
data: chartDataMonth,
options: {
responsive: true,
maintainAspectRatio: false,
tooltips: {
mode: 'index',
intersect: false,
callbacks: {
label: function(tooltipItems, data) {
return '€' + tooltipItems.yLabel;
}
}
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Day'
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Amount'
},
ticks: {
// Include a euro sign in the ticks
callback: function(value, index, values) {
return '€' + value;
}
}
}]
}
}
});
</script>