Как показать графики из программы 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)

1

Решение

Вы можете сохранить сюжет в виде файла 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)
0

Другие решения

Я не уверен, что это лучший способ отобразить график на веб-странице, но я бы использовал библиотеку диаграмм 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>
0

По вопросам рекламы [email protected]