<!-- 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
}
};
效果图: