前端 Highcharts图表,如何动态传入数据
来源：互联网 发布：python爬虫视频教程 编辑：程序博客网 时间：2024/05/17 03:04
第一种: 折线图
jsp:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!--[if lt IE 9]>
<script type="text/javascript" src="lib/html5shiv.js"></script>
<script type="text/javascript" src="lib/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="${base}/static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="${base}/static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="${base}/lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="${base}/lib/icheck/icheck.css" />
<link rel="stylesheet" type="text/css" href="${base}/static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="${base}/static/h-ui.admin/css/style.css" />
<!--[if IE 6]>
<script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
<title>折线图</title>
</head>
<body>
<nav class="breadcrumb"><i class="Hui-iconfont"></i> 首页 <span class="c-gray en">></span> 统计管理 <span class="c-gray en">></span> 折线图
<a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新"><i class="Hui-iconfont"></i></a>
</nav>
<div class="page-container" id="newUser_body">
<div id="container" style="min-width:700px;height:400px"></div>
</div>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="${base}/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="${base}/lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="${base}/lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="${base}/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="${base}/static/h-ui/js/H-ui.js"></script>
<script type="text/javascript" src="${base}/static/h-ui.admin/js/H-ui.admin.js"></script>
<script type="text/javascript" src="${base}/static/js/common/dateUtil.js"></script>
<script type="text/javascript" src="${base}/static/common.js"></script>
<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="${base}/lib/hcharts/Highcharts/5.0.6/js/highcharts.js"></script>
<script type="text/javascript" src="${base}/lib/hcharts/Highcharts/5.0.6/js/modules/exporting.js"></script>
<script type="text/javascript">
//定义一个Highcharts的变量，初始值为null
var oChart = null;
//定义oChart的布局环境
//布局环境组成：X轴、Y轴、数据显示、图标标题
var oOptions = {
//设置图表关联显示块和图形样式
chart: {
renderTo: 'container', //设置显示的页面块
type: 'line' //设置显示的方式
//type: 'column'
},
//图标标题
title: {
text: '本月新增用户和流失用户图表'
//text: null, //设置null则不显示标题
},
//x轴
xAxis: {
categories: ['一号', '二号', '三号', '四号', '五号', '六号', '七号', '八号', '九号', '十号', '十一号', '十二号', '十三号', '十四号', '十五号', '十六号', '十七号', '十八号', '十九号', '二十号', '二十一号', '二十二号', '二十三号', '二十四号', '二十五号', '二十六号', '二十七号', '二十八号', '二十九号', '三十号', '三十一号']
},
//y轴
yAxis: {
title: {
text: '人数 (个)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
lang: {
printChart:"打印图表",
downloadJPEG: "下载JPEG 图片" ,
downloadPDF: "下载PDF文档" ,
downloadPNG: "下载PNG 图片" ,
downloadSVG: "下载SVG 矢量图" ,
exportButtonTitle: "导出图片"
},
credits: {
enable: 'false',
text: '<b style="font-size:12px;">游戏统计中心</b>',
href: ' '
},
//数据列
series: []
};
$(document).ready(function() {
oChart = new Highcharts.Chart(oOptions);
//异步动态加载数据列
LoadSerie_Ajax();
LoadSerie_Ajax2();
});
//异步读取数据并加载到图表
function LoadSerie_Ajax() {
oChart.showLoading();
$.ajax({
url: '${base}/count/getNgCount.do',
type: 'POST',
dataType: 'json',
contentType: "application/x-www-form-urlencoded; charset=utf-8",
success: function(rntData) {
var oSeries = {
name: "流失用户数量",
data: rntData.data
};
oChart.addSeries(oSeries);
}
});
oChart.hideLoading();
}
function LoadSerie_Ajax2() {
oChart.showLoading();
$.ajax({
url: '${base}/count/getCount.do',
type: 'POST',
dataType: 'json',
contentType: "application/x-www-form-urlencoded; charset=utf-8",
success: function(rntData) {
var oSeries = {
name: "新增用户数量",
data: rntData.data
};
oChart.addSeries(oSeries);
}
});
oChart.hideLoading();
}
</script>
</body>
</html>
后台:
@ResponseBody
@RequestMapping(value = "/getCount.do")
public Message getCount(Integer id, Model model) {
int[] arr = {123,100,99,88,77,66,55,44,33,23,30,10,20,30,40,50,200,70,100,90,200,100,60,23,30,10,20,30};
return new Message(arr);
}
折线图,柱状图,区域图基本查不多,改下type : column(柱状图),area(区域图) 效果自己看上传图片,
第二种 :时间轴折线图
jsp:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!--[if lt IE 9]>
<script type="text/javascript" src="lib/html5shiv.js"></script>
<script type="text/javascript" src="lib/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="${base}/static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="${base}/static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="${base}/lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="${base}/lib/icheck/icheck.css" />
<link rel="stylesheet" type="text/css" href="${base}/static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="${base}/static/h-ui.admin/css/style.css" />
<!--[if IE 6]>
<script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
<title>时间轴折线图</title>
</head>
<body>
<nav class="breadcrumb"><i class="Hui-iconfont"></i> 首页 <span class="c-gray en">></span> 统计管理 <span class="c-gray en">></span> 时间轴折线图
<a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新"><i class="Hui-iconfont"></i></a>
</nav>
<div class="page-container">
<div id="container" style="min-width:700px;height:400px"></div>
</div>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="${base}/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="${base}/lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="${base}/lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="${base}/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="${base}/static/h-ui/js/H-ui.js"></script>
<script type="text/javascript" src="${base}/static/h-ui.admin/js/H-ui.admin.js"></script>
<script type="text/javascript" src="${base}/static/js/common/dateUtil.js"></script>
<script type="text/javascript" src="${base}/static/common.js"></script>
<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="${base}/lib/hcharts/Highcharts/5.0.6/js/highcharts.js"></script>
<script type="text/javascript" src="${base}/lib/hcharts/Highcharts/5.0.6/js/modules/exporting.js"></script>
<script type="text/javascript">
//定义一个Highcharts的变量，初始值为null
var oChart = null;
//定义oChart的布局环境
//布局环境组成：X轴、Y轴、数据显示、图标标题
var oOptions = {
//设置图表关联显示块和图形样式
chart: {
renderTo: 'container', //设置显示的页面块
type: 'area' //设置显示的方式
//type: 'column'
},
//图标标题
title: {
text: '本月每天在线人数表'
//text: null, //设置null则不显示标题
},
//x轴
xAxis: {
//categories: ['一号', '二号', '三号', '四号', '五号', '六号', '七号', '八号', '九号', '十号', '十一号', '十二号', '十三号', '十四号', '十五号', '十六号', '十七号', '十八号', '十九号', '二十号', '二十一号', '二十二号', '二十三号', '二十四号', '二十五号', '二十六号', '二十七号', '二十八号', '二十九号', '三十号', '三十一号']
type: 'datetime',
//maxZoom: 1000 * 60 * 60 * 24,
title: {
text: null
}
},
//y轴
yAxis: {
title: {
text: '在线人数'
}
},
tooltip: {
shared: true
},
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
credits: {
enable: 'false',
text: '<b style="font-size:12px;">游戏统计中心</b>',
href: ' '
},
//数据列
series: []
};
$(document).ready(function() {
oChart = new Highcharts.Chart(oOptions);
//异步动态加载数据列
LoadSerie_Ajax();
});
//异步读取数据并加载到图表
function LoadSerie_Ajax() {
oChart.showLoading();
$.ajax({
url: '${base}/count/getNgCount.do',
type: 'POST',
dataType: 'json',
contentType: "application/x-www-form-urlencoded; charset=utf-8",
success: function(rntData) {
var oSeries = {
name: "流失用户数量",
pointInterval: 12 * 3600 * 1000, //间隔12小时取一次数据
pointStart: Date.UTC(2017, 10, 23),
data: rntData.data
};
oChart.addSeries(oSeries);
}
});
oChart.hideLoading();
}
</script>
</body>
</html>
后台:
@ResponseBody
@RequestMapping(value = "/getNgCount.do")
public Message getNgCount(Integer id, Model model) {
List<Integer> list = new ArrayList<>();
list.add(20);
list.add(30);
list.add(40);
list.add(50);
list.add(60);
list.add(80);
list.add(90);
list.add(110);
list.add(40);
list.add(50);
list.add(60);
list.add(80);
list.add(90);
list.add(110);
list.add(20);
list.add(30);
list.add(110);
return new Message(list);
}
第三种 :饼状图
jsp:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!--[if lt IE 9]>
<script type="text/javascript" src="lib/html5shiv.js"></script>
<script type="text/javascript" src="lib/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="${base}/static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="${base}/static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="${base}/lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="${base}/lib/icheck/icheck.css" />
<link rel="stylesheet" type="text/css" href="${base}/static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="${base}/static/h-ui.admin/css/style.css" />
<!--[if IE 6]>
<script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
<title>饼状图</title>
</head>
<body>
<nav class="breadcrumb"><i class="Hui-iconfont"></i> 首页 <span class="c-gray en">></span> 统计管理 <span class="c-gray en">></span> 饼状图
<a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新"><i class="Hui-iconfont"></i></a>
</nav>
<div class="page-container">
<div id="container" style="min-width:700px;height:400px"></div>
</div>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="${base}/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="${base}/lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="${base}/lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="${base}/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="${base}/static/h-ui/js/H-ui.js"></script>
<script type="text/javascript" src="${base}/static/h-ui.admin/js/H-ui.admin.js"></script>
<script type="text/javascript" src="${base}/static/js/common/dateUtil.js"></script>
<script type="text/javascript" src="${base}/static/common.js"></script>
<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="${base}/lib/hcharts/Highcharts/5.0.6/js/highcharts.js"></script>
<script type="text/javascript" src="${base}/lib/hcharts/Highcharts/5.0.6/js/modules/exporting.js"></script>
<script type="text/javascript">
//定义一个Highcharts的变量，初始值为null
var oChart = null;
//定义oChart的布局环境
//布局环境组成：X轴、Y轴、数据显示、图标标题
var oOptions = {
//设置图表关联显示块和图形样式
chart: {
renderTo: 'container', //设置显示的页面块
type: 'pie'
},
//图标标题
title: {
text: '每月余额比例人数'
//text: null, //设置null则不显示标题
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
credits: {
enable: 'false',
text: '<b style="font-size:12px;">游戏统计中心</b>',
href: ' '
},
lang: {
printChart: "打印图表",
downloadJPEG: "下载JPEG 图片",
downloadPDF: "下载PDF文档",
downloadPNG: "下载PNG 图片",
downloadSVG: "下载SVG 矢量图",
exportButtonTitle: "导出图片"
},
//数据列
series: []
};
$(document).ready(function() {
oChart = new Highcharts.Chart(oOptions);
//异步动态加载数据列
LoadSerie_Ajax();
});
//异步读取数据并加载到图表
function LoadSerie_Ajax() {
//debugger;
oChart.showLoading();
$.ajax({
url: '${base}/count/getPie1.do',
type: 'POST',
dataType: 'json',
contentType: "application/x-www-form-urlencoded; charset=utf-8",
success: function(result) {
var json = result.data; //传入的map
var jsondata = []; //定义一个空的数组
for(var i in json) { //遍历
jsondata.push([i, json[i]]); //赋值
}
var oSeries = {
name: "余额分布图",
data: jsondata //将数组传入
};
oChart.addSeries(oSeries);
}
});
oChart.hideLoading();
}
</script>
</body>
</html>
后台:
@ResponseBody
@RequestMapping(value = "/getPie1.do")
public Message getPie1(Integer id, Model model) {
//{"杂想":1,"心情":1,"ckeditor":3,"文艺":1,"随笔":1,"进步":1,"感想":1,"xheditor":2,"java":1,"测试":1,"css":1};
Map<String, Integer> data = new HashMap<>();
data.put("杂想", 30);
data.put("心情", 10);
data.put("文艺", 20);
data.put("随笔", 15);
data.put("感想", 15);
data.put("测试", 10);
return new Message(data);
}
- 前端 Highcharts图表,如何动态传入数据
- highcharts+json+ashx 图表动态数据绑定
- Highcharts 前端图表插件
- highcharts spline传入数据
- highcharts如何动态获取数据
- Highcharts动态刷新图表
- highcharts动态生成图表
- highcharts动态图表
- 如何将json数据传入到Highcharts中的data中
- 如何将json数据传入到Highcharts中的data中
- (jQuery,Highcharts)前端图表系列之一 --Highcharts
- Highcharts入门 前端图表显示
- ASP.NET中动态获取数据使用Highcharts图表控件
- highcharts插件动态添加数据（图表内容）
- 使用 HighCharts 动态获取后台数据生成图表
- Highcharts AJAX JSON JQuery 实现动态数据交互显示图表
- 图表highcharts联合jquery ajax 后端取数据前端图表渲染
- 数据可视化图表插件--HighCharts
- 去除List集合中的重复值
- 模糊查询和聚会函数
- 初识别
- 【Spring】动态代理
- PullToRefreshscrollview的具体使用
- 前端 Highcharts图表,如何动态传入数据
- Java与C++
- git 使用流程
- android studio ndk开发 操作流程
- selenium与firefox、 chrome版本对应关系
- 关于点击图片弹出遮罩层查看
- centos7 安装PostgreSQL
- 更改头像 相册/相机
- 初学者的vue笔记
