highcharts
最近项目所需画图，觉得highcharts插件是引用纯js构造，如何从后台取值传到前端页面展示。项目框架：spring mvc
如下所示:(曲线图)
在servlet-context.xml中需配置将对象转化成json格式的数据转化到前端页面展示：
<bean
class="org.springframework.web.servlet.mvc.annotation.DefaultAnnotationHandlerMapping" />
<bean
class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">
<property name="messageConverters">
<list>
<ref bean="mappingJacksonHttpMessageConverter" />
</list>
</property>
</bean>
<bean id="mappingJacksonHttpMessageConverter"
class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter">
<property name="supportedMediaTypes">
<list>
<value>text/html;charset=UTF-8</value>
</list>
</property>
</bean>
然后在collertor中得到后端数据:
@RequestMapping("/getData.json")
@ResponseBody
public Object getChartData(String type, HttpServletRequest request,
HttpServletResponse response) throws Exception {
//判断类型
String managerId = (String) request.getSession().getAttribute("managerId");
Long lo = null;
try {
if (managerId != null) {
lo = new Long(managerId);
}
} catch (Exception e) {
}
if (lo == null) {
lo = 0L;
}
if ("WAS.UsedMem".equals(type)) {
List list = getWasDataService.produceGraphData(lo, "WASJVM");
List<List<Long>> resultList = new ArrayList<List<Long>>();
if (list != null && list.size() > 0) {
for (int index = 0; index < list.size(); index++) {
Map map = (Map) list.get(index);
BigInteger collectionTime = (BigInteger) map.get("COLLECTIONTIME");
Integer usedMem = (Integer) map.get("USEDMEMORY");
List<Long> l = new ArrayList<Long>();
l.add(collectionTime.longValue());
l.add(usedMem.longValue());
resultList.add(l);
}
}
return resultList;
}
return null;
}
从数据库中得到数据，并保存到json格式的数据中。
前端：
<script>
$(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
usedMemChart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'spline',
marginRight: 1,
events: {
load: requestData
}
},
title: {
text: '最近一小时内存'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: '已用内存(KB)'
},
labels: {
formatter: function() {
return this.value;
},
style: {
color: '#4572A7'
}
},
plotLines: [{
value: 0,
width: 1,
color: '#069B14'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
plotOptions: {
spline: {
lineWidth: 4,
states: {
hover: {
lineWidth: 5
}
},
marker: {
enabled: false,
states: {
hover: {
enabled: true,
symbol: 'circle',
radius: 5,
lineWidth: 1
}
}
},
pointInterval: 300000,
pointStart: (new Date()).getTime() - 3600000 //一个小时
}
},
series: [{
name: '内存',
data: []
}]
});
});
function requestData() {
$.ajax({
url: 'getData.json',
data: {"type":"WAS.UsedMem"},
type: 'post',
dataType: 'json',
success: function(data) {
var series = usedMemChart.series[0];
series.setData(data);
// call it again after one second
setInterval(requestData, 300000);
},
error: function(xhr) {
// call it again after one second
setInterval(requestData, 120000);
},
cache: false
});
}
</script>
引用的requestData这个方式是自动刷新，且从后台得到数据传给前端页面展示。
画图工具highcharts api:http://www.highcharts.com/ref/#plotOptions-pie