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

我不确定这是否是在网页上显示图形的最佳方法，但是我将使用Chart.js之类的JavaScript图表库来绘制数据。该图表将具有响应性和动态性：只需按下带有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>

Answer 2

您可以将图保存到类似文件的BytesIO流中，然后使用 flask 中的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)

如何显示从python程序到网站的图形？

2 个答案: