Highcharts 动态加载数据

冰冻的心

浏览: 12724 次
性别:
来自: 上海

最近访客更多访客>>

caichengo

York_

wm_wl

xinyi486931

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Highcharts

json Ajax

前言：首先请自行到官网去下载js文件 http://www.hcharts.cn

后台传过来的数据格式：

{"钢联":[{"period":300,"time":"10:01:00","app_id":"123","app_name":"钢联","sessions":0},{"period":300,"time":"10:02:00","app_id":"123","app_name":"钢联","sessions":0},{"period":300,"time":"10:03:00","app_id":"123","app_name":"钢联","sessions":0},{"period":300,"time":"10:04:00","app_id":"123","app_name":"钢联","sessions":2},{"period":300,"time":"10:05:00","app_id":"123","app_name":"钢联","sessions":14}],"旅游族":[{"period":300,"time":"10:01:00","app_id":"test123","app_name":"旅游族","sessions":0},{"period":300,"time":"10:02:00","app_id":"test123","app_name":"旅游族","sessions":1},{"period":300,"time":"10:03:00","app_id":"test123","app_name":"旅游族","sessions":25},{"period":300,"time":"10:04:00","app_id":"test123","app_name":"旅游族","sessions":0},{"period":300,"time":"10:05:00","app_id":"test123","app_name":"旅游族","sessions":0}]}

下面前台获取数据展示

<script type="text/javascript">
var chart;
$(document).ready(function() {
    $("#home_active").addClass("active");
    var datas = ""; //接收 series数据切记数据符合[{},{}]
    //加载app活跃度数据；
    var app_sessions = [];//每分钟活跃度次数
    var app_date = [];//时间段
    $.ajax({
        url: "${ctx}/mdrback/list",
        type: "POST",
        async: true,
        data: {
            "size": 5,
            "endDate": new Date()
        },
        dataType: "json",
        success: function(data) {
            for (i in data) {
                var app = data[i];
                for (j in app) {
                    app_date[j] = app[j].time; //当前活跃时间段
                    app_sessions[j] = app[j].sessions; //活跃次数
                }
                datas += "{name: '" + i + "',data:[" + app_sessions + "]},"; //组装数据图
            }

            chart = new Highcharts.Chart({
                chart: {
                //设置曲线线条类型
                    defaultSeriesType: 'spline',
                  //曲线图放到 id 为container的 div 中显示
                    renderTo: "container",

                    width: 600
                },
                title: {
                    text: 'App activity of the top five',
                    x: -20 //center
                },
                subtitle: {
                    text: 'Source: kitapps.com.cn',
                    x: -20
                },
                xAxis: {
                    categories: app_date
                },
                yAxis: {
                    title: {
                        text: 'Activity (/ second)'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                tooltip: {
                    valueSuffix: '(number)'
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'top',
                    x: -10,
                    y: 100,
                    borderWidth: 0
                },
                series: eval("[" + datas.substring(0, datas.length - 1) + "]") //转换成series的图片数据接受数组[{},{}]数据
            });
        },
        error: function(data) {
            alert("load data error");
        }
    });
});
</script>

如有不规范之处，还望指出，谢谢！