fronend/js/reference.js

/*function get_data(url, callback){
    if(url=="la.anyone.alldata"){
        callback([
            {name:"张三", id:133, approve:300, decline:400, Accumulate:1000,worktime:1},
            {name:"李四", id:133, approve:300, decline:400, Accumulate:1000,worktime:2},
            ]);
        return;
    }
    callback([{x:1527957798468,y:3000},{x:1527957799468,y:3000},{x:1527957800468,y:3000.5},{x:1527957801468,y:3001}]);
}

get_data('la.acceptedCount.3600',mmm);
function mmm(shuju) {

    console.log("------ getting la.acceptedCount.3000 -------")
    console.log(shuju);

    var chart = Highcharts.chart('container1',{
        chart: {
            type: 'spline'
        },
        title: {
            text: '月平均降雨量'
        },
        subtitle: {
            text: '数据来源: WorldClimate.com'
        },
        xAxis: {
            tickInterval: 1000, // 坐标轴刻度间隔为一星期
            tickWidth: 0,
            gridLineWidth: 1,
            // 时间格式化字符
            // 默认会根据当前的刻度间隔取对应的值，即当刻度间隔为一周时，取 week 值
            dateTimeLabelFormats: {
                week: '%Y-%m-%d'
            }
        },
        yAxis: {
            // min: 0,
            // title: {
            //     text: '降雨量 (mm)'
            // }
        },
        tooltip: {
            // head + 每个 point + footer 拼接成完整的 table
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                borderWidth: 0
            }
        },
        series: [{
            name: '东京',
            data: shuju
        }]
    });
}

setInterval(lll,100);
function lll() {

}

get_data("la.anyone.alldata", showAllData);
function showAllData(shuju){
    var htmlbody = "";
    var i = 0;
    for(i=0; i < shuju.length; i++){
        var one_person = shuju[i];
        htmlbody += "<tr>";
        htmlbody += "                              <tr>\n" +
            "                                            <td>"+one_person.name+"("+one_person.id+")</td>\n" +
            "                                            <td>"+one_person.approve+"</td>\n" +
            "                                            <td>"+one_person.decline+"</td>\n" +
            "                                        </tr>";
        htmlbody += "</tr>";
    }

    $("#rank-one").html(htmlbody);
}*/

var chart = Highcharts.chart('container1', {
    title: {
        text: '合格数'
    },
    /*subtitle: {
        text: '数据来源：thesolarfoundation.com'
    },*/
    xAxis: {
        title: {
            text: '员工'
        }
    },
    yAxis: {
        title: {
            text: '就业人数'
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },
    plotOptions: {
        series: {
            label: {
                connectorAllowed: false
            },
            pointStart: 2010
        }
    },
    series: [{
        name: '安装，实施人员',
        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
    }, {
        name: '工人',
        data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
    }, {
        name: '销售',
        data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
    }, {
        name: '项目开发',
        data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
    }, {
        name: '其他',
        data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
    }],
    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                legend: {
                    layout: 'horizontal',
                    align: 'center',
                    verticalAlign: 'bottom'
                }
            }
        }]
    }
});

var chart = Highcharts.chart('container2', {
    chart: {
        type: 'bar'
    },
    title: {
        text: '不合格数'
    },
    xAxis: {
        categories: ['苹果', '橘子', '梨', '葡萄', '香蕉']
    },
    yAxis: {
        min: 0,
        title: {
            text: '员工'
        }
    },
    legend: {
        /* 图例显示顺序反转
         * 这是因为堆叠的顺序默认是反转的，可以设置
         * yAxis.reversedStacks = false 来达到类似的效果
         */
        reversed: true
    },
    plotOptions: {
        series: {
            stacking: 'normal'
        }
    },
    series: [{
        name: '小张',
        data: [5, 3, 4, 7, 2]
    }, {
        name: '小彭',
        data: [2, 2, 3, 2, 1]
    }, {
        name: '小潘',
        data: [3, 4, 4, 2, 5]
    }]
});

var chart = Highcharts.chart('container3', {
    chart: {
        type: 'column'
    },
    title: {
        text: '堆积数'
    },
    /*subtitle: {
        text: '数据截止 2017-03，来源: <a href="https://en.wikipedia.org/wiki/List_of_cities_proper_by_population">Wikipedia</a>'
    },*/
    xAxis: {
        type: 'category',
        /* labels: {
             rotation: -45  // 设置轴标签旋转角度
         }*/
        title: {
            text: '员工'
        }
    },
    yAxis: {
        min: 0,
        title: {
            text: '人口 (百万)'
        }
    },
    legend: {
        enabled: false
    },
    tooltip: {
        pointFormat: '人口总量: <b>{point.y:.1f} 百万</b>'
    },
    series: [{
        name: '总人口',
        data: [
            ['上海', 24.25],
            ['卡拉奇', 23.50],
            ['北京', 21.51],
            ['德里', 16.78],
            ['拉各斯', 16.06],
            ['天津', 15.20],
            ['伊斯坦布尔', 14.16],
            ['东京', 13.51],
            ['广州', 13.08],
            ['孟买', 12.44],
            ['莫斯科', 12.19],
            ['圣保罗', 12.03],
            ['深圳', 10.46],
            ['雅加达', 10.07],
            ['拉合尔', 10.05],
            ['首尔', 9.99],
            ['武汉', 9.78],
            ['金沙萨', 9.73],
            ['开罗', 9.27],
            ['墨西哥', 8.87]
        ],
        dataLabels: {
            enabled: true,
            rotation: -90,
            color: '#FFFFFF',
            align: 'right',
            format: '{point.y:.1f}', // :.1f 为保留 1 位小数
            y: 10
        }
    }]
});

var chart = Highcharts.chart('container4', {
    chart: {
        type: 'line'
    },
    title: {
        text: '工作时长'
    },
    /*subtitle: {
        text: '数据来源: WorldClimate.com'
    },*/
    xAxis: {

        title: {
            text: '员工'
        }
    },
    yAxis: {
        title: {
            text: '气温 (°C)'
        }
    },
    plotOptions: {
        line: {
            dataLabels: {
                // 开启数据标签
                enabled: true
            },
            // 关闭鼠标跟踪，对应的提示框、点击事件会失效
            enableMouseTracking: false
        }
    },
    series: [{
        name: '东京',
        data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
    }, {
        name: '伦敦',
        data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
    }]
});

var chart = Highcharts.chart('container5', {
    chart: {
        type: 'column'
    },
    title: {
        text: '不良率'
    },
    xAxis: {
        /*categories: ['苹果', '橘子', '梨', '葡萄', '香蕉']*/
        title: {
            text: '员工'
        }
    },
    yAxis: {
        min: 0,
        title: {
            text: '水果消费总量'
        }
    },
    tooltip: {
        pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b>' +
        '({point.percentage:.0f}%)<br/>',
        //:.0f 表示保留 0 位小数，详见教程：https://www.hcharts.cn/docs/basic-labels-string-formatting
        shared: true
    },
    plotOptions: {
        column: {
            stacking: 'percent'
        }
    },
    series: [{
        name: '小张',
        data: [5, 3, 4, 7, 2]
    }, {
        name: '小彭',
        data: [2, 2, 3, 2, 1]
    }, {
        name: '小潘',
        data: [3, 4, 4, 2, 5]
    }]
});