Highcharts将数据以图表的形式展现
1、首先将Highcharts插件所需的js跟css样式文件引入项目中，下载地址为：Highcharts.rar
2、在前台页面中添加一个存放图表的容器
<div id="container" style="min-width: 400px; height: 500px; margin: 0 auto"></div>
3、在后台拼接json数据
@Action("ycccBarGramData")
public void ycccBarGramData() {
try {
String nyStr = FormatDate.getNyStr(tjksny, tjjsny);
List<Map<String, Object>> resultList = this.ycccService.getYcccList(nyStr, jgdm);
if (resultList != null && resultList.size() > 0) {
String yValue = "";
String yData = "";
Map<String, Object> data = resultList.get(0);
String[] params = new String[]{"YCZS", "WCLS", "YFKWCLS", "RQS", "JDWCLS", "YJDBLS", "YJDQSHQRS", "ZS"};
for (int i = 0; i < params.length; i++) {
yData += data.get(params[i]) + ",";
}
yData = yData.substring(0, yData.length() - 1);
yValue += "{type:'column',name:'" + data.get("JGMC") + "',data:[" + yData + "]}";
StringBuffer arrJson = new StringBuffer("{");
arrJson.append("\"iSucc\":true");
arrJson.append(",\"title\":\"异常查处分布图(" + tjksny + "至" + tjjsny + ")\"");
arrJson.append(",\"subTitle\":\"(" + tjksny + "至" + tjjsny + ")\"");
arrJson.append(",\"yTitle\":\"异常查处数\"");
arrJson.append(",\"xValue\":\"['异常总数','未处理数','已反馈未处理数','日清数','监督未处理数','已监督办理数','已监督且审核确认数','总数']\"");
arrJson.append(",\"yValue\":\"[" + yValue + "]\"");
arrJson.append("}");
this.renderHtml(arrJson.toString());
} else {
this.renderHtml("{\"iSucc\":false,\"noData\":true}");
}
} catch (Exception e) {
this.renderHtml("{\"iSucc\":false}");
e.printStackTrace();
}
}
4、在前台页面中接受后台传过去的json数据
$(function () {
var tjksny = "<#if tjksny??>${tjksny}</#if>";
var tjjsny = "<#if tjjsny??>${tjjsny}</#if>";
var jgdm = "<#if jgdm??>${jgdm}</#if>";
$.post(
"${base}/fxyp/ycccBarGramData",
{
"tjksny":tjksny,
"tjjsny":tjjsny,
"jgdm":jgdm
},
function (data) {
var json = eval("(" + data + ")");
initBarDate(json.title, json.subTitle, json.yTitle, json.xValue, json.yValue);
});
});
function initBarDate(title, subTitle, yTitle, xValue, yValue) {
//获取图标系统所有颜色
var colors = Highcharts.getOptions().colors;
//初始化图标
chart = new Highcharts.Chart({
chart:{
renderTo:'container', //返回id为container容器
defaultSeriesType:'column', //返回样式
marginTop:105, //图标距离上方距离
marginRight:15,
type:'column'
},
title:{
text:'<span style="font-size:13px;">' + title + '</span>' //标题
},
subtitle:{ //子标题
text:'<span style="color:red">' + subTitle + '</span>',
floating:true
},
xAxis:{ //x轴数据构造
categories:eval('(' + xValue + ')'),
title:{
text:'异常类型'
},
labels:{
rotation:-45,
align:'right',
style:{
fontSize:'13px',
fontFamily:'Verdana, sans-serif'
}
}
},
yAxis:{
min:0,
title:{
text:'异常数量'
}
},
tooltip:{
formatter:function () {
return '' +
this.x + ': ' + this.y;
}
},
plotOptions:{
column:{
pointPadding:0.2,
borderWidth:0,
dataLabels:{
enabled:true,
color:colors[0],
style:{
fontWeight:'bold'
},
formatter:function () {
return this.y;
}
}
}
},
legend:{
layout:'vertical', //【图例】显示的样式：水平（horizontal）/垂直（vertical）
backgroundColor:'#FFFFFF',
borderColor:'#CCC',
borderWidth:1,
align:'right',
verticalAlign:'top',
enabled:true,
y:35,
shadow:true,
floating:true
},
credits:{
enabled:true
},
exporting:{ //导出
filename:"chart",
type:"image/png",
url:'${base}/system/dwzxt/download'
},
series:eval('(' + yValue + ')')
});
}