JavaWeb项目jquery ajax跨域请求node.js渲染highcharts

    <!-- jQuery -->
    <script src="${pageContext.request.contextPath}/back/scripts/jquery-1.9.1.min.js"></script>
    <!-- highcharts -->
    <script type="text/javascript" src="${pageContext.request.contextPath}/back/frame-lib/Highcharts-3.0.6/js/highcharts.js"></script>
    <script type="text/javascript">
		$(function () { 
			$.ajax({
				url : 'http://192.168.1.58:3000/china?datatime='+new Date().getTime(),
				beforeSend: function(){
					$("#ozil-tab-wl").append('<div id="container" style="width:1200px;height:1800px;margin:100px auto;"></div>');
				},
				dataType : "jsonp",
				cache: false,
				success : function(myData) {
				console.info(myData);
				    chart = new Highcharts.Chart({
						data: {
						           // table: document.getElementById('datatable')
						        },				    
				        chart: {  
				            renderTo: 'container',  //图表在页面显示容器  
				            type: 'bar',       //图表类型(line线性,此项为默认值)  
				            marginRight: 130,   //右宽度(类css margin-right)  
				            marginBottom: 25    //下宽度  
				        }, 
				        title: {  
				            text: 'ip地址全国分布',    //正标题  
				            x: -20 //center  默认标题居中,-20为相对居中往左20,往右则为正数           
				        },  
				        subtitle: {  
				            text: 'wifi客户端使用情况',   //副标题  
				            x: -20  
				        },  
				        xAxis: {   
				            //横坐标显示数据  
				            categories: myData.cate  
				        },  
				        yAxis: {  
				                        //纵坐标标题  
				            title: {  
				                text: 'ip使用个数'  
				            },  
				            //标线属性  
				            plotLines: [{  
				                value: 0,  
				                width: 1,  
				                color: '#808080'  
				            }]  
				        },  
				        //数据点的提示框内容  
				        tooltip: {  
				            //数据格式,自定义  
				            formatter: function() {  
				                    return '<b>'+ this.series.name +'</b><br/>'+  
				                    this.x +': '+ this.y +'个数';  
				            }  
				        },  
				        //数据点参数选项  
				        plotOptions: {  
				            line: {  
				                dataLabels: {  
				                    enabled: true   //数据点显示数据(默认为不显示)  
				                },  
				                enableMouseTracking: false  //当鼠标移到数据点上时,是否显示数据提示框(默认为显示)  
				            },
			                series: {
			                    cursor: 'pointer',
			                    point: {
			                        events: {
			                            click: function() {
			                            	var ozilTWO = $("#ozil-tab-wl");
			                            	if(loadRequest)
			                            		loadRequest.abort();
			                            		ozilTWO.html('<div id="mst-loading" class="ajax-effect">Loading...<div class="ajax-effect"></div></div>');
												loadRequest = $.ajax({
													url : '${pageContext.request.contextPath}/back/ipvince.jsp',
													type : "post",
													dataType : "html",
													data : {myData : myData.cate[this.x]},
													success : function (data){
														ozilTWO.html(data);
													}
												});			                            		
			                            }
			                        }
			                    }
			                 }				              
				        },  
				        //数据项显示位置(此例为: 'Tokyo', 'New York',显示位置为右边)  
				        legend: {  
				            layout: 'vertical',  
				            align: 'right',  
				            verticalAlign: 'top',  
				            x: -10,  
				            y: 100,  
				            borderWidth: 0  
				        },  
				        //需显示的数据内容  
				        series: [{
				        	name : myData.name,
				        	data : myData.data
				        }] 
				    });  
				}
			});
		});	
	</script>	

node.js

1:app.js

/**
 * Module dependencies.
 */

var express = require('express');
var routes = require('./routes');
var user = require('./routes/user');
var http = require('http');
var path = require('path');

var app = express();

// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.json());
app.use(express.urlencoded());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));

// development only
if ('development' == app.get('env')) {
  app.use(express.errorHandler());
}

app.get('/', routes.index);
app.get('/users', user.list);
app.get('/china', routes.china);
app.get('/province', routes.province);

http.createServer(app).listen(app.get('port'), function(){
  console.log('Express server listening on port ' + app.get('port'));
});

2:routes/index.js
/*
 * GET home page.
 */

exports.index = function(req, res){
  res.render('index', { title: 'Express' });
};

var urllib = require('url');
exports.china = function(req, res){
	var data = {
		name: '中国',  
		data: [
			448, 333, 125, 144, 223, 324, 55, 33,44,55,33,45,26,68,67,67,34,89,35,34,35,34,24,34,
			45,34,23,58,67,54,34,34,23,38
		],
		cate: [
			'北京市(京)','天津市(津)','上海市(沪)','重庆市(渝)','河北省(冀)','河南省(豫)','云南省(云)',
			'辽宁省(辽)','黑龙江省(黑)','湖南省(湘)','安徽省(皖) ','山东省(鲁)','新疆维吾尔(新)',
			'江苏省(苏)','浙江省(浙)','江西省(赣) ','湖北省(鄂) ','广西壮族(桂) ','甘肃省(甘)',
			'山西省(晋)','内蒙古(蒙)','陕西省(陕)','吉林省(吉)','福建省(闽)','贵州省(贵)','西藏(藏)',
			'广东省(粤)','青海省(青)','四川省(川)','宁夏回族(宁)','海南省(琼)','台湾省(台)','香港特别行政区',
			'澳门特别行政区'
		]	
	};
	var params = urllib.parse(req.url, true);
	console.log(params);
	if (params.query && params.query.callback) {
		//console.log(params.query.callback);
		var str =  params.query.callback + '(' + JSON.stringify(data) + ')';//jsonp
		res.end(str);
	} else {
		res.end(JSON.stringify(data));//普通的json
	}     
};

效果图:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值