numpy pandas matplotlib和django结合，将matplotlib图片显示到HTML上

首先进行效果展示:

Django文件布局：

views.py

from django.shortcuts import render,HttpResponse
from app1 import BPLackAnalysis
import pandas as pd
import matplotlib.pyplot as plt
import base64
from io import BytesIO

def multiChart(data,sigma_spec):
    plt.figure(figsize=(12,9))
    plt.subplot(311)
    plt.title("CTC Array FAB H3PO4 Monitor for BP Lack")
    plt.plot(data["time"],data["mean"],color="b",marker="*")
    plt.subplot(312)
    data["slope_spec"]=0
    plt.title("$mean{(y2-y1)}$")
    plt.plot(data["time"],data["slope"],color="b")
    plt.plot(data["time"],data["slope_spec"],color="r")
    plt.subplot(313)
    data["sigma_spec"]=sigma_spec
    plt.title("3$sigma$")
    plt.plot(data["time"],data["3sigma"],color="b")
    plt.plot(data["time"],data["sigma_spec"],color="r")
    buffer = BytesIO()
    plt.savefig(buffer)
    plot_data = buffer.getvalue()
    return plot_data

def aaa():
    pass

def index(request):
    if request.method=="POST":
        group_num = 120
        sigma_spec = 0.5
        file_in_path = request.POST.get("file_in_path")
        file_out_path = request.POST.get("file_out_path")
        group_num = request.POST.get("group_num")
        sigma_spec = request.POST.get("sigma_spec")
        print(file_in_path)
        print(group_num)
        try:
            in_file = pd.read_excel(file_in_path)
            print("123")
            data = BPLackAnalysis.dataArrange(in_file,int(group_num))
            data["time"] = data["time"].astype(str)
            print(data.head())
            #将matplotlib图片转换为HTML
            plot_data = multiChart(data,sigma_spec)
            imb = base64.b64encode(plot_data)#对plot_data进行编码
            ims = imb.decode()
            imd = "data:image/png;base64,"+ims
            #iris_im = """<img src="%s">""" % imd
            temp_time = []
            temp_H3PO4 = []
            cnt=0
            for i in range(len(data["slope"])-3):
                if data["slope"][i] < 0 and data["slope"][i+1] < 0 and data["slope"][i+2] < 0:
                    cnt+=1
                    temp_time.insert(0,data["time"][i+2])
                    #只保留两位小数
                    temp_H3PO4.insert(0,round(data["mean"][i+2],2))
                    i+=3
            # 保存清洗后数据
            data.to_excel(file_out_path, sheet_name="data")
            print("OK",temp_time,cnt)
            return render(request, "bplack.html",{"img":imd,"temp_time":temp_time,"cnt":cnt,"temp_H3PO4":temp_H3PO4})
        except:
            ret= "文件读取失败，请确认文件路径是否正确!"+r"正确格式示范：C:\Users\raylu\Desktop\ArrayBP\BPLack.xlsx"
            return HttpResponse(ret)
    else:
        return render(request, "index.html")

 

BPLackAnalysis.py

import numpy as np
import pandas as pd
import xlrd
import datetime
import matplotlib.pyplot as plt

#数据清洗,num为定义母数
def dataArrange(data,num):
    new_data = pd.DataFrame({"time":data["start"],"mean":data["mean"]})
    ls1,ls2,ls3,ls4 = [],[],[],[]
    len_data = len(new_data["time"])
    for i in range(0,int(len_data/num)):
        ls1.insert(0,new_data["time"][len_data-1-i*num])
        #H3PO4 mean
        ls2.insert(0,new_data["mean"][(len_data-1-(i+1)*num):(len_data-1-i*num)].mean())
        #H3PO4 mean: this - last
        if i == 0:
            ls3.insert(0,0)
        else:
            ls3.insert(0,ls2[1]-ls2[0])
        #3 sigma
        ls4.insert(0,new_data["mean"][(len_data-1-(i+1)*num):(len_data-1-i*num)].std()*3)
    return pd.DataFrame({"time":ls1,"mean":ls2,"slope":ls3,"3sigma":ls4})

#时间转换
def timeTrans(data):
    data["time"] = data["time"].apply(
        lambda x:datetime.datetime.strptime(
            x[0:4]+"-"+x[4:6]+"-"+x[6:8]+" "+x[8:10]+":"+x[10:12]+":"+x[12:14],
            "%Y-%m-%d %H:%M:%S")
    )
    return data

#多图绘制
def multiChart(data,sigma_spec):
    plt.figure(figsize=(12,10))
    plt.subplot(311)
    plt.title("CTC Array FAB H3PO4 Monitor for BP Lack")
    plt.plot(data["time"],data["mean"],color="b",marker="*")
    plt.subplot(312)
    data["slope_spec"]=0
    plt.title("$mean{(y2-y1)}$")
    plt.plot(data["time"],data["slope"],color="b")
    plt.plot(data["time"],data["slope_spec"],color="r")
    plt.subplot(313)
    data["sigma_spec"]=sigma_spec
    plt.title("3$sigma$")
    plt.plot(data["time"],data["3sigma"],color="b")
    plt.plot(data["time"],data["sigma_spec"],color="r")
    return plt

if __name__ == "__main__":
    file = r"C:\Users\mayn\Desktop\ArrayBP\BPLack.xlsx"
    read_file = pd.read_excel(file)
    print(read_file.head())
    data = dataArrange(read_file,120)
    print(data.head())
    data["time"] = data["time"].astype(str)
    # data = timeTrans(data)
    # print(data.head())
    #输出清洗后数据
    file_path=r"C:\Users\mayn\Desktop\ArrayBP\new_data.xlsx"
    data.to_excel(file_path,sheet_name="data")
    multiChart(data,0.5)

 

index.html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>CTC Array FAB H3PO4监控系统</title>

    <!-- Bootstrap -->
    <link href="/static/plugins/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body class="container text-center">

    <h3>欢迎使用CTC Array FAB H3PO4监控系统，首先进行您的数据配置</h3>

    <p>
    <form action="/index.html/" method="post">
    {% csrf_token %}
        <table class="table">
            <tr>
                <td class="col-md-3">原始文件路径</td>
                <td class="col-md-9" style="text-align: left"><input type="text" name="file_in_path" style="width: 600px;" placeholder="C:\Users\raylu\Desktop\ArrayBP"></td>
            </tr>
              <tr>
                <td class="col-md-3">输出文件路径</td>
                <td class="col-md-9" style="text-align: left"><input type="text" name="file_out_path" style="width: 600px;" placeholder="C:\Users\raylu\Desktop\ArrayBP"></td>
            </tr>
              <tr>
                <td class="col-md-3">group笔数</td>
                <td class="col-md-9" style="text-align: left"><input type="number" name="group_num" style="width: 600px;" placeholder="120"></td>
            </tr>
              <tr>
                <td class="col-md-3">sigma_spec</td>
                <td class="col-md-9" style="text-align: left"><input type="number" step="0.1" name="sigma_spec" style="width: 600px;" placeholder="0.5"></td>
            </tr>
        </table>
        <p><input type="reset" value="重置">&nbsp;<input type="submit" value="提交配置"></p>
    </form>
    </p>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="/static/js/jquery-3.3.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="/static/plugins/bootstrap/js/bootstrap.min.js"></script>
  </body>
</html>

 

bplack.html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>CTC Array FAB H3PO4监控系统</title>

    <!-- Bootstrap -->
    <link href="/static/plugins/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body class="container text-center">

  <h4>欢迎使用<span style="color: blue; font-size: 30px">CTC Array FAB H3PO4</span>监控系统，
      <a onclick="show_persons(this)">本案技术支持人员:</a></h4>
        <table class="table table-hover table-striped" id="persons">
            <thead class="info">
                <td>No</td>
                <td>Dept.</td>
                <td>Name</td>
                <td>Tele</td>
                <td>email</td>
            </thead>
            <tbody>
                <tr class="warning">
                    <td class="col-md-1">1</td>
                    <td class="col-md-2">QA/QS</td>
                    <td class="col-md-2">王玉</td>
                    <td class="col-md-2">12345</td>
                    <td class="col-md-5">357837067@qq.com</td>
                </tr>
                <tr class="info">
                    <td>2</td>
                    <td>CF/INSP</td>
                    <td>路XX</td>
                    <td>12345</td>
                    <td>357837067@qq.com</td>
                </tr>
            </tbody>
        </table>
        {% if cnt >= 1 %}
        <h4 style="text-align: left">
            连续3笔数据mean(y2-y1)<0笔数:
            <span style="color: red; font-size: 30px">{{ cnt }}</span>&nbsp;
            最近一笔发生时间:
            <span style="color: red; font-size: 20px">{{ temp_time.0 }}</span>&nbsp;
            H3PO4值为:
            <span style="color: red; font-size: 20px">{{ temp_H3PO4.0 }}</span>&nbsp;
            请立即确认是否有异常!</h4>
        {% endif %}
    <p>
        <img src="{{ img }}">
    </p>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="/static/js/jquery-3.3.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="/static/plugins/bootstrap/js/bootstrap.min.js"></script>
    <script>
        function show_persons(ths){

            if ($("#persons").css("display")=="none"){
                $("#persons").show();
            }else{
                $("#persons").hide();
            }
        }
    </script>
  </body>
</html>