HighChar 折线图，柱形图，饼图实现

我在此为大家展示常见的折线图，柱形图，饼图 的实现过程；

—-把数据做成活的就是把数据转换成人家的格式，下面就是具体的实现步骤，若有更好的转换方式请留言。

*声明：其中含有自己的业务逻辑，已经标注其中，自己根据需求查看。

发现问题，遇到问题可以直接指出！希望在此可以帮助大家，给大家提供便利，让大家共同进步~*

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
});
}