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

来源：互联网发布：中国人工智能协会编辑：程序博客网时间：2024/06/10 19:44

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

首先看一下代码：

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 0