Как показать графики из программы Python на сайт?

Question

У меня есть файл 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)

Answer 1

Вы можете сохранить график в виде файла BytesIO, затем, используя функцию send_file из flask , вы можете отправить его клиенту для визуализации.

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)

Answer 2

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