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
[javascript]
- /**
- * 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
[javascript]
- /*
- * 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
- }
- };
效果图：
