分享一个ajax highcharts示例

浏览:4805 发布日期:2015/10/03 分类:求助交流
网上找了很多示例,一直没有成功,最主要是卡在json数据转换成highcharts数据列格式,最开始是不知道如何把json数据转换为相应的X、Y数据,好不容易找到答案后,发现转换出来的数据highcharts显示不了,发现是转换后的highcharts数据包括双引号(["20","30","40"]),后来利用js中的parseInt转换数据格式([20,30,40])才正常显示。
总的来说还是基础不扎实,一对json数据格式不了解,二是第一次使用highcharts,第三是对js数据格式不了解,走了很多弯路,希望大家别走这样的弯路了$("#floor").change(function(){
            var lastdata = [];
            var a=$(this).val();
            var b=$("#building").val();
            var c=$("#city").val();
            var xset =new Array();//X轴数据集  
            var yset =new Array();//Y轴数据集
            $.ajax({
                data:{floor:a,building:b,city:c},
                datatype:"POST",
                url:"__APP__/index/index/floorselect",
                success:function(data){
                    var i,len=data.length;         
                        for( i=0;i<len;i++){
                            yset[i] = parseInt(data[i].num);    
                            xset[i] = data[i].time.substr(5,8); 
                        }
                    console.log(xset);   
                    console.log(yset); 
                    showChart(xset,yset); 
                    function showChart(xset,yset){  
                        var chart = new Highcharts.Chart({  
                            chart: {  
                                renderTo: 'container',  
                                type: 'line',  
                                marginRight: 130,  
                                marginBottom: 85  
                            },  
                              
                            xAxis: {  
                                categories: xset  
                            },  
                            yAxis: {  
                                title: {  
                                    text: '人数'  
                                },  
                                plotLines: [{  
                                    value: 0,  
                                    width: 1,  
                                    color: '#808080'  
                                }]  
                            },  
                            tooltip: {  
                                formatter: function() {  
                                        return '<b>'+ this.series.name +'</b><br/>'+  
                                        this.x +': '+ this.y;  
                                }  
                            },  
                            legend: {  
                                layout: 'vertical',  
                                align: 'right',  
                                verticalAlign: 'top',  
                                x: -10,  
                                y: 100,  
                                borderWidth: 0  
                            },  
                            series: [{  
                                name: '时间',  
                                data: yset
                            }]  
                        });  
                    }  
                }
            });
        })
代码的大意是通过下拉列表向后台选中相应的值,后台ajax返回json数据,将返回的json分别转换为highcharts的X,Y数据列,
这里不知道json返回的数值是带双引号的,所以要用parseInt改变数据格式,去掉双引号才行,至于为什么会有双引号,就需要大神来解答了,也许是ajaxreturn返回的字符串格式把

最佳答案
评论( 相关
后面还有条评论,点击查看>>