由于工作要求，需要写一个网页可以实时展示当前用户登入的数据。 于是就有了这个flask做后端，HighChart做前段chart， Datatables 做表格展示的小网页。
highcharts 和 datatables 都是开源的，文档很成熟，商业用途需收费
datatables 的官方网站为 http://www.datatables.net
highchart 的官方网站是 https://www.hcharts.cn
Flask
因为我们的数据库是oracle的，所以需要用到cx_oracle, 我之前有文章讲怎么在windows上setup这个库。这里还用了flask_cache 这个库来缓存，这样就不必每次都去数据库拿数据了，怕开销太大。
后端这里我遇到了一个问题，前段ajax从flask拿数据的时候有跨域的问题，这是一个普遍的问题，有多种解决方式，我这里是通过服务端设置Access-Control-Allow-Origin来解决的，用了一个装饰函数allow_cross_domain 来搞定
Highchart
Highchart也遇到了一些问题，我仿照highcharts的官方实时刷新的例子 。但是这个例子当添加一个点的时候自动删掉一最老的一个点。 参考API文档后发现， chart.series[0].addPoint([x, y]) 函数后面参数用默认值就好了，官方例子都赋值了true , 下面是官方文档对这个函数的说明：
addPoint (Object options, [Boolean redraw], [Boolean shift], [Mixed animation])
参数
options: Number|Array|Object数据点的配置，可以是单个数值，表示数据点的 y值；也可以是一个数组，包含 x 和 y 值；还可以是一个对象，包含详细的数据点配置，详细的配置见 series.data。
redraw: Boolean默认是 true，是否在操作完毕后对图标进行重绘操作。 当需要增加多个点时，强烈建议将 redraw 设置为 false，并在所有操作结束后手动调用 chart.redraw() 来对图表进行重绘操作。
shift: Boolean默认是 false，当此属性为 true 时，新增点的同时会删除数据列中的第一个点（即保持数据列中数据点的总数不变）。在检测图表中这个属性非常有用。
animation: Mixed默认是 true，即新增点时包含默认动画效果的，这个参数也可以传入包含 duration
及 easing 的对象形式，详细参考动画相关配置。
官方的例子里面的结构看的不爽，我自己重新调整了下结构，更加可读
datatables
datatables 需要实施刷新，官方有个插件去做这个，但是感觉不够灵活。 下面的代码即可。 网上有些例子是fnCleartable, fnxxx 什么的，是旧版本的，最新的datatables并没有这些函数了。可以去官方的API文档查看
$('#users').DataTable().clear()
$('#users').DataTable().rows.add()
$('#users').DataTable().draw()
后端代码：
from flask import Flask, render_template, make_response, jsonify
from functools import wraps
from flask_cache import Cache
import cx_Oracle
app=Flask(__name__)
# app configuration
app.config['SECRET_KEY']='!@$RFGAVASDGAQQQ'
cache = Cache(app,config={'CACHE_TYPE': 'simple'})
conn = cx_Oracle.connect('BLITZSTAT/BLITZSTAT@10.27.10.18/orcl')
cursor = conn.cursor ()
def allow_cross_domain(fun):
@wraps(fun)
def wrapper_fun(*args, **kwargs):
rst = make_response(fun(*args, **kwargs))
rst.headers['Access-Control-Allow-Origin'] = '*'
rst.headers['Access-Control-Allow-Methods'] = 'PUT,GET,POST,DELETE'
allow_headers = "Referer,Accept,Origin,User-Agent"
rst.headers['Access-Control-Allow-Headers'] = allow_headers
return rst
return wrapper_fun
@app.route('/')
@allow_cross_domain
@cache.cached(timeout=2, key_prefix='random')
def index():
sql_string = "SELECT distinct USERID FROM BLITZSTAT.STG_IS_SESSION_STATS"
cursor.execute(sql_string)
row = cursor.fetchall()
userCount=len(row)
data= {'data':userCount, 'users':row}
return jsonify(data)
@app.route('/test/')
def test():
return render_template('test.htm')
if __name__ == '__main__':
app.run(host='0.0.0.0')
HTML 代码
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<!--link to hchart js-->
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.13/css/jquery.dataTables.css">
<style type="text/css">${demo.css}</style>
<script type="text/javascript">
$(function () {
var chart= Highcharts.chart('container',
{
chart: {
//type: 'line',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0]
}
}
},
title: {
text: 'User #'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 15
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [
{
name: 'User',
data:[]
}]
});
var mytable = $('#users').DataTable(
{
columns: [{ title: "Name" } ]
}
);
function updatechart(data)
{
var x = (new Date()).getTime(),
y = data;
chart.series[0].addPoint([x, y]);
}
function updateDataTables(users)
{
mytable.clear();
mytable.rows.add(users);
mytable.draw();
}
function update()
{
$.get("http://yourmachine:5000", function(data)
{
updatechart(data.data);
updateDataTables(data.users);
})
}
$(document).ready(function () {
window.setInterval(update, 1000);
});
});
</script>
</head>
<body>
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<table id="users" class="display" width="100%"></table>
</body>
</html>
网友评论