关闭

highcharts中从后台获取数据并添加

2294人阅读 评论(0) 收藏 举报

看了很多文章,但是最后还是没讲解明白,但是还是获得一点提示,最后终于添加成功了,尽量详细(本图为多组柱状图)

首先看一下代码:

Data.ajaxGetCall("/admin/report/userAction?",function(data){//后台请求数据X轴为时间,Y轴分别有评论数,收藏数//Data.ajaxGetCall();为自己封装的方法,
                var timeData = data.timeData;
                var comment = data.comment;
                var favor = data.favor;
                $('#container2').highcharts({
                    chart: {
                        type: 'column'
                    },
                    title: {
                        text: '用户行为',
                        x: -20
                    },
                    subtitle: {
                        text: 'Source: www.baidu.com',
                        x: -20
                    },
                    xAxis: {
                        categories: [timeData.seven, timeData.six, timeData.five, timeData.four, timeData.third, timeData.last,timeData.now]//后台请求的时间数据直接放到这可以显示//也可以直接封装成函数
                    },
                    yAxis: {
                        title: {
                            text: 'User Action'
                        },
                        min:0, //Y显示最小值
                        tickInterval: 1, //步长
                        max:10,//最大

                        //如果去掉min,tickInterval,max三个字段,那么highcharts就会自动设置这三个值

                        plotLines: [{
                            value: 0,
                            width: 1,
                            color: '#808080'
                        }]
                    },
                    tooltip: {
                        valueSuffix: ''
                    },
                    legend: {
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'middle',
                        borderWidth: 0
                    },
                    series: [{
                        name: '评论',
                        data: userAct(comment)
                    }, {
                        name: '收藏',
                        data: userAct(favor)
                    }]
                });
                function userAct(arr){
                    var data = new Array();

                    var length = arr.length;
                    for(var i=0;i<length;i++){
                        data[i] = parseInt(arr[i]);
                    }
                    return data;
                }
            });

在开始放数据的时候在X轴直接放后台查出数据就行,而放Y轴数据是老是不显示,查了很多文章终于知道一点data中的数据最好是整形,用函数parseInt(),完全可以正常显示(本人js很弱),后台返回数据是数值字符串,必须用parseInt转换后才能显示,于是写了个函数遍历转换数值然后形成新数组然后再塞回去;再次查看柱状图就有了(总体来说方法很笨)

0
2

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:87606次
    • 积分:1520
    • 等级:
    • 排名:千里之外
    • 原创:22篇
    • 转载:280篇
    • 译文:0篇
    • 评论:2条