web worker+highcharts动态实现可视化数据展示

web worker+highcharts动态实现可视化数据展示

1. 模块局部定时刷新，轮转翻页
2. worker 实时通信，获取数据，重构highcharts-dom

//以下是worker.js部分代码，如需调用ajax，需构建虚拟dom---jquery.nodom.js
importScripts("jquery.nodom.js");
onmessage = function(event){
            loadNowPerCount();
            recently7days();
            equipment();
            sys_count();
            sys_money();
            bulid_record();
            registration();
            takeaway();
            undo();
            deduction();
            setInterval(loadNowPerCount,5000);
            setInterval(recently7days,16000);
            setInterval(equipment,6000);
            setInterval(registration,10000);
            setInterval(takeaway,15000);
            setInterval(undo,20000);
            setInterval(deduction,25000);
            setInterval(sys_count,7000);
            setInterval(sys_money,8000);
            setInterval(bulid_record,9000);
    } 
function rd() {
    return Math.floor(Math.random() * 100);
}
function loadNowPerCount(){
    //服务人次实时刷新
    var clothestoday_worker = Math.floor(Math.random() * 10)
    var nowPerCount= {
                'clothestoday_worker':clothestoday_worker,
                }
    var data = {
        'type':'nowPerCount',
        'param':nowPerCount
    }
    postMessage(data);
}

//以下是调用worker 部分代码
 var testWorker = new Worker('js/testworker.js');
    testWorker.postMessage("");
    var sysArr = ["nowPerCount","recently7days","equipment","sys_count","sys_money","bulid_record"];//固定参数
    var newArr = dataArr.concat(sysArr);
    testWorker.onmessage = function(event) {
        var type = event.data.type;
        var flag = $.inArray(type, newArr);
        if(flag != -1){
            switch (type) {

            case "nowPerCount":
                //实时刷新折线图 
                clothestoday_worker = event.data.param.clothestoday_worker;

            break;

            case "recently7days":
                    var recently7daysCount = event.data.param.recently7daysCount;
                    eval(recently7daysCount);
                    var recently7daysTime = event.data.param.recently7daysTime;
                    goods_count_option.series[0].data =recently7daysCount;//发放
                    goods_count_option.xAxis.categories= recently7daysTime
                    goods_count_chart = new Highcharts.Chart(goods_count_option);  

                break;    

            case "equipment":
                    var equipmentCount = event.data.param.equipmentCount;
                    recycle_info_option.series[0].data =equipmentCount;
                    recycle_info_chart = new Highcharts.Chart(recycle_info_option,function(c) {
                        // 环形图圆心
                        var centerY = c.series[0].center[1],
                            titleHeight = parseInt(c.title.styles.fontSize);
                        c.setTitle({
                            y:centerY + titleHeight/2
                        });
                        chart = c;
                    });
                break;