我在此为大家展示常见的折线图,柱形图,饼图 的实现过程;
—-把数据做成活的就是把数据转换成人家的格式,下面就是具体的实现步骤,若有更好的转换方式请留言。
*声明:其中含有自己的业务逻辑,已经标注其中,自己根据需求查看。
发现问题,遇到问题可以直接指出!希望在此可以帮助大家,给大家提供便利,让大家共同进步~*
1.折线图:
首先从后台获取数据:
@ResponseBody
@RequestMapping("chars")
//获取数据
public void chars(HttpServletResponse response) throws IOException{
//查询出数据
List<Publish> publishList = hospitalRegisterService.getpublishList();
//转成JSON 传到前台
response.getWriter().print(JSONArray.fromObject(publishList).toString();
}
//定义全局变量
var number = "";
var time = "";
var data = "";
var data1 = "";
var t = "";
//通过ajax 接收值
$.ajax({
//异步提交(自己查看异步提交和同步提交的不同,这里不做详解)
async:false,
type:"post",
url:"chars.action",
dataType:"json",
success:function(s){
//循环赋值
for(i in s){
time += s[i].publish_time+","
number += s[i].publish_number+",";
}
}
});
//展示的数据 需要用eval解析
data1 = eval("["+number.substring(0,number.length - 1)+"]");
//横坐标
data = time.substring(0,time.length - 1);
t = data.split(",");
//折线图
$('#container').highcharts({
//标题
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
//副标题
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
//横坐标
xAxis: {
//这里是上面的转成的数据
categories: t
},
//纵坐标
yAxis: {
title: {
//单位
text: 'Temperature (°C)'
},
plotLines:[{
color:'red', //线的颜色,定义为红色
dashStyle:'longdashdot',//标示线的样式,默认是solid(实线),这里定义为长虚线
value:3, //定义在哪个值上显示标示线,这里是在x轴上刻度为3的值处垂直化一条线
width:2 //标示线的宽度,2px
}]
},
//显示框
tooltip: {
valueSuffix: '°C'
},
legend: {//方框所在的位置
layout: 'vertical',
align: 'right',//程度标的目标地位
verticalAlign: 'middle',//垂直标的目标地位
borderWidth: 0 //边框大小
x: 0, //间隔x轴的间隔
y: 0 //间隔Y轴的间隔
},
//数据源(这里只展示一条数据)
series: [{
name: 'Tokyo',
data: data1
}]
});
2.柱形图:
柱形图和折线图几乎是一样的!!!
从后台获取值也一样
@ResponseBody
@RequestMapping("chars")
//获取数据
public void chars(HttpServletResponse response) throws IOException{
//查询出数据
List<Publish> publishList = hospitalRegisterService.getpublishList();
//转成JSON 传到前台
response.getWriter().print(JSONArray.fromObject(publishList).toString();
}
//定义全局变量
var number = "";
var data = "";
var data1 = "";
//通过ajax 接收值
$.ajax({
//异步提交(自己查看异步提交和同步提交的不同,这里不做详解)
async:false,
type:"post",
url:"chars.action",
dataType:"json",
success:function(s){
//循环赋值
for(i in s){
number += s[i].publish_number+",";
}
}
});
//展示的数据 需要用eval解析
data1 = eval("["+number.substring(0,number.length - 1)+"]");
//柱形图
var chart = new Highcharts.Chart({
chart: {//图表区选项
renderTo: 'container',//图表放置的容器
type: 'column',//图表哦类型
options3d: {
enabled: true,
alpha: 15,
beta: 15,
depth: 50,
viewDistance: 25
}
},
title: {//标题选项
text: 'Chart rotation demo'
},
subtitle: {//副标题选项
text: 'Test options by dragging the sliders below'
},
plotOptions: {//数据点选项
column: {
depth: 25
},
},
xAxis: {//x轴选项
//默认月份
categories:Highcharts.getOptions().lang.shortMonths
},
yAxis: {//y轴选项
title: {
text: null
}
},
series: [{//数据列选项
data:data1
}]
});
3.饼图:
饼图和折线图 ,柱形图不太相同。
首先把要显示的数据封装一个bean:
public class HighChar {
private String publish_time;
private Integer publish_number;
public String getPublish_time() {
return publish_time;
}
public void setPublish_time(String publish_time) {
this.publish_time = publish_time;
}
public Integer getPublish_number() {
return publish_number;
}
public void setPublish_number(Integer publish_number) {
this.publish_number = publish_number;
}
//构造方法
public HighChar(String publish_time, Integer publish_number) {
super();
this.publish_time = publish_time;
this.publish_number = publish_number;
}
}
从后台获取数据
@ResponseBody
@RequestMapping("chars")
public List<HighChar> chars(HttpServletResponse response) throws IOException{
//查询数据
List<Publish> publishList = hospitalRegisterService.getpublishList();
//定义一个List集合
List<HighChar> resultList = new ArrayList<HighChar>();
//将查询出来的数据存入List集合
for (Publish publish : publishList) {
resultList.add(new HighChar(publish.getPublish_time(),publish.getPublish_number()));
}
//返回的是一个集合
return resultList;
}
前台代码
//定义 chart
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
//常规图表选项设置
chart: {
renderTo: 'container', //在哪个区域呈现,对应HTML中的一个元素ID
plotBackgroundColor: null, //绘图区的背景颜色
plotBorderWidth: null, //绘图区边框宽度
plotShadow: false //绘图区是否显示阴影
},
//图表的主标题
title: {
text: '医院预约量'
},
//当鼠标经过时的提示设置
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage}%</b>',
percentageDecimals: 1
},
//每种图表类型属性设置
plotOptions: {
//饼状图
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function() {
//Highcharts.numberFormat(this.percentage,2)格式化数字,保留2位精度
return '<b>'+ this.point.name +'</b>: '+Highcharts.numberFormat(this.percentage,2) +' %';
}
}
}
},
//图表要展现的数据
series: [{
type: 'pie',
name: '预约量'
}]
});
});
$(function(){
//ajax获取数据
$.ajax({
type:"get",
url:'chars.action',//提供数据的请求路径
dataType:"json",
success:function(data){
//定义数组
var array = [];
//循环存入数组
$.each(data,function(i,d){
array.push([d.publish_time,d.publish_number]);
});
//chart 的数据源赋值
chart.series[0].setData(array);
},
//错误后的回调函数
error:function(e){
alert(e);
}
});
});
4.饼图 前台也可以拼接字符串转换成格式
//定义
var chart2;
$(document).ready(function() {
//异步请求数据
$.ajax({
async:false,
type:"post",
url:'dayAccount.do',//提供数据的Servlet
dataType:"json",
success:function(data){
var array = "";
$.each(data,function(i,d){
array = array + "{name:'"+d.typename+"',y:"+d.count+"},"
});
array = array.substring(0, array.length-1);
chart2 = "["+array+"]";
//调用下面的方法
dochart(chart2)
}
});
});
function dochart(chart2){
var value = " [{type: 'pie',name: '市场份额',data:"+chart2+"}]";
value = eval(value);
chart = new Highcharts.Chart({
//常规图表选项设置
chart: {
renderTo: 'container', //在哪个区域呈现,对应HTML中的一个元素ID
plotBackgroundColor: null, //绘图区的背景颜色
plotBorderWidth: null, //绘图区边框宽度
plotShadow: false //绘图区是否显示阴影
},
//图表的主标题
title: {
text: '2012年10月份浏览器市场份额'
},
//当鼠标经过时的提示设置
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage}%</b>',
percentageDecimals: 1
},
//每种图表类型属性设置
plotOptions: {
//饼状图
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function() {
//Highcharts.numberFormat(this.percentage,2)格式化数字,保留2位精度
return '<b>'+ this.point.name +'</b>: '+Highcharts.numberFormat(this.percentage,2) +' %';
}
}
}
},
//图表要展现的数据
series: value
});
}