Flask Web开发--3.实时SPC控制图的开发设计

更多创客作品，请关注笔者网站园丁鸟，搜集全球极具创意，且有价值的创客作品
ROS机器人知识请关注，diegorobot
业余时间完成的一款在线统计过程分析工具SPC，及SPC知识分享网站qdo

---

#前言
实时SPC也就是SPC的运行控制图，是实时收集生产过程中的生产数据，如来料检验的数据，生产过程中的数据，成品检验数据，然后对数据进行SPC的分析形成实时是控制图，并通过判异规则对判断存在品质失控的数据点，先上效果图：





感兴趣的同学可以到Qdo.plus体验

#功能设计
实时图表采用了Bokeh开源图表开发包，Bokeh可以说是数据分析图表的神器，而且本身是python开发的，可以和Flask无缝集成在一起，这里主要介绍实时图表的制作，以均值运行图为例，首先我们需要为图表定义Ajax类型的data source，并定义更新的频率polling_interval，mode参数可以是replace，也可以append，也就是全部覆盖原来的数据，还是只是添加新数据。同时还需要定义数据跟新的视图函数data_x，后续只要在data_x函数中处理此数据源，Web页面上的图表数据就会实时变化。下面是后台图表定义的代码

def bokeh_monitor_x(chart_id,x,y,ucl,cl,lcl):
    url_str='/data_x/'+str(chart_id)
    source= AjaxDataSource(data_url=url_str,
                            polling_interval=5000, mode='replace')

    source.data=set_source_data(x,y)

    p= figure( title=_('X-bar'),tools="pan",sizing_mode="stretch_width",plot_height=300, background_fill_color="#fafafa",y_range=(lcl*0.95,ucl*1.05),x_minor_ticks=5)
    p.toolbar.autohide = True
    p.line('x', 'y', source=source, line_width=2,line_color="green", line_alpha=0.5)
    p.circle('x', 'y', source=source,fill_color="white",size=8)
    set_p_rule(p,source)
    set_p_limit(p,ucl,cl,lcl)

    p.legend.click_policy="hide"
    p.x_range.follow = "end"

    script, div = components(p)
    return script, div

@spc.route('/data_x/', methods=['GET', 'OPTIONS', 'POST'])
def data_x(id):

    ##get from cache
     monitor_data=cache.get('spc_monitor_'+str(id)) 
    data_index=8#缓存数据的列索引
    x0=monitor_data.get_data_newest(100)[ : ,0]
    y0=monitor_data.get_data_newest(100)[ : ,data_index] 

    t=get_t_dic(x0,y0,monitor_data.cl,monitor_data.lcl,monitor_data.ucl)
    
    return jsonify(t)

下面是web页面的示例代码,在需要显示图表的位置，标记{{mdiv0|safe}}，并在头部引用scrip

{{ js_resources|indent(4)|safe }}
{{ css_resources|indent(4)|safe }}
{{mscript0|indent(4)|safe}}


    

        

            

                

                    {{mdiv0|safe}}
                
            
        
    
 

最后只需在flask的视图函数中，按照如下调用

...
script0, div0 = bokeh_monitor_(id,x_value,y_value,ucl,cl,lcl)
return render_template('spc_x_bar.html', js_resources=js_resources,css_resources=css_resources,mscript0=script0,mdiv0=div0)
...