Highstock＋flask+mysql实现多线条动态刷新

来源：互联网发布：平面设计制图软件编辑：程序博客网时间：2024/05/16 02:00

server端：

flask web服务器，接受请求返回数据

from flask import Flask,render_template,requestfrom mysql import MySqlimport timeimport datetimeimport randomimport jsonapp = Flask(__name__)def get_data_buyer(sql):    mysql = MySql()    datas = mysql.query_data(sql)    return parse_data_from_db(datas, 'ts', 'buyer')def get_data_seller(sql):    mysql = MySql()    datas = mysql.query_data(sql)    return parse_data_from_db(datas, 'ts', 'seller')def get_data_user(sql):    mysql = MySql()    datas = mysql.query_data(sql)    return parse_data_from_db(datas, 'ts', 'login_user')def _datetime2timestamp(dt):    date_format = "%Y-%m-%d %H:%M:%S"    return time.mktime(time.strptime(str(dt), date_format))def _timestamp2datetime(ts):    date_format = "%Y-%m-%d %H:%M:%S"    return time.strftime(date_format, time.localtime(ts))def parse_data_from_db(data, field_ts=None, field_other=None):    if len(data) == 0:        return [], None    results = []    max_time = 0.0    for item in data:        temp = []        ts = _datetime2timestamp(item.get(field_ts))        temp.append(ts * 1000)        if field_other == 'login_user':            temp.append(int(item.get(field_other)) / 100)        else:            temp.append(int(item.get(field_other)))        if ts > max_time:            max_time = ts        results.append(temp)    return results, _timestamp2datetime(max_time)@app.route('/')def index():    return render_template('MulLine.html')@app.route('/data')def data():    if int(request.args.get('max_time_buyer', 0)) == 0:        sql_buyer = "select * from t_buyer"    else:        last_time_buyer = _timestamp2datetime(float(request.args.get('max_time_buyer', 0)) / 1000.0)        sql_buyer = "select * from t_buyer where unix_timestamp(ts) > unix_timestamp(" + '"' + last_time_buyer + '"' + ")"    if int(request.args.get('max_time_seller', 0)) == 0:        sql_seller = "select * from t_seller"    else:        last_time_seller = _timestamp2datetime(float(request.args.get('max_time_seller', 0)) / 1000.0)        sql_seller = "select * from t_seller where unix_timestamp(ts) > unix_timestamp(" + '"' + last_time_seller + '"' + ")"    if int(request.args.get('max_time_user', 0)) == 0:        sql_user = "select * from t_user"    else:        last_time_user = _timestamp2datetime(float(request.args.get('max_time_user', 0)) / 1000.0)        sql_user = "select * from t_user where unix_timestamp(ts) > unix_timestamp(" + '"' + last_time_user + '"' + ")"    arr = {}    data_buyer, max_time_buyer_str = get_data_buyer(sql_buyer)    data_seller, max_time_seller_str = get_data_seller(sql_seller)    data_user, max_time_user_str = get_data_user(sql_user)    arr['data_buyer'] = data_buyer    arr['data_seller'] = data_seller    arr['data_user'] = data_user    return json.dumps(arr)def start_server():    app.run(host='0.0.0.0',port=9999,debug=True)if __name__=='__main__':    start_server()

js文件：

周期性向server请求数据，计算最晚的时间，请求新数据并显示

function find_max_time(times){    max_time = times[0][0]    for(i=1; i < times.length; i++){        if(times[i][0] > max_time){            max_time = times[i][0]        }    }    return max_time}$(function () {    Highcharts.setOptions({        global : {            useUTC : false        }    });    $.getJSON('/data', function(data){        var param_max_times = {            'max_time_buyer':0,            'max_time_seller':0,            'max_time_user':0        };        param_max_times['max_time_buyer'] = find_max_time(data.data_buyer);        param_max_times['max_time_seller'] = find_max_time(data.data_seller);        param_max_times['max_time_user'] = find_max_time(data.data_user);        $('#container').highcharts('StockChart', {            chart : {                events : {                    load : function () {                        var series_data_buyer = this.series[0],                            series_data_seller = this.series[1],                            series_data_user = this.series[2];                        setInterval(function() {                            $.getJSON('/data', param_max_times, function(data) {                                console.log(data);                                var data_buyer = data.data_buyer,                                    data_seller = data.data_seller,                                    data_user = data.data_user;                                if(data_buyer.length > 0){                                    console.log(data_buyer);                                    $.each(data_buyer, function(i, d){                                        series_data_buyer.addPoint(d, true, true)                                        console.log(d)                                    });                                     param_max_times['max_time_buyer'] = find_max_time(data_buyer);                                }                                if(data_seller.length > 0){                                    $.each(data_seller, function(i, d){                                        series_data_seller.addPoint(d, true, true)                                     });                                    param_max_times['max_time_seller'] = find_max_time(data_seller);                                }                                if(data_user.length > 0){                                    $.each(data_user, function(i, d){                                        series_data_user.addPoint(d, true, true)                                     });                                    param_max_times['max_time_user'] = find_max_time(data_user);                                }                            });                        },1000 * 10)                    }                },                borderColor: '#EBBA95',                borderWidth: 2,                borderRadius: 10            },            navigator: {                adaptToUpdatedData: false,                handles: {                    backgroundColor: '#9BCD9B',                    borderColor: '#9BCD9B'                },            },            legend: {                enabled: true,                layout: 'vertical',                align: 'left',                verticalAlign: 'top',                backgroundColor: '#FCFFC5',                borderColor: 'black',                borderWidth: 2,                shadow: true            },            rangeSelector: {                buttonTheme: { // styles for the buttons                    fill: 'none',                    stroke: 'none',                    'stroke-width': 0,                    r: 8,                    style: {                        color: '#039',                        fontWeight: 'bold'                    },                    states: {                        hover: {                        },                        select: {                            fill: '#039',                            style: {                                color: 'white'                            }                        }                    }                },                inputBoxBorderColor: 'gray',                inputBoxWidth: 120,                inputBoxHeight: 18,                inputStyle: {                    color: '#039',                    fontWeight: 'bold'                },                labelStyle: {                    color: 'silver',                    fontWeight: 'bold'                },                buttons: [{                    count: 30,                    type: 'second',                    text: '30S'                }, {                    count: 5,                    type: 'minute',                    text: '5M'                }, {                    count: 30,                    type: 'minute',                    text: '30M'                }, {                    count: 1,                    type: 'day',                    text: '1D'                },{                    count: 2,                    type: 'day',                    text: '2D'                }, {                    type: 'all',                    text: 'All'                }],                inputEnabled: true,                selected: 5            },            title : {                text : 'Customer Statics',                style: {                    color: '#5CACEE',                    fontWeight: 'bold'                }            },                            xAxis: {                title: {                    text: 'time'                },                type: 'datetime',                tickPixelInterval: 50            },            yAxis: [{                title: {                    text: 'value'                },                plotLines: [{                    value: 0,                    width: 1,                    color: '#808080'                }]            }],            exporting: {                enabled: false            },            series : [{                name : 'buyer',                tooltip: {                    valueDecimals: 2,                    valuePrefix: '$',                    valueSuffix: ' USD'                },                data : data.data_buyer            },{                name : 'seller',                tooltip: {                    valueDecimals: 2,                    valuePrefix: '%',                    valueSuffix: ' RMB'                },                data : data.data_seller            },{                name : 'login_user',                tooltip: {                    valueDecimals: 2,                    valuePrefix: '#',                    valueSuffix: ' CCC'                },                data : data.data_user            }]        }    );    });});

1 0