Highchart 动态从库中读取数据
前台页面jsp
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="${ctx}/common/chartJs/highcharts.js"></script>
<script src="${ctx}/common/chartJs/modules/exporting.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.post("${ctx}/chart/updateChartAction2.do", function(json) {
new Highcharts.Chart({
chart : {
//将图表显示至 container div
renderTo : 'container',
//char的类型 line, spline, area, areaspline, column, bar, pie and scatter
type : 'line',
//上边距
marginRight : 130,
//下边距
marginBottom : 45,
//不显示动画(性能)
animation : false
},
//标题
title : {
text : 'Monthly Average Temperature',
//The x position of the title relative to the alignment within chart.spacingLeft and chart.spacingRight. Defaults to 0.
x : 0
},
//子标题
subtitle : {
text : 'Source: WorldClimate.com',
x : 0
},
//x轴 标题
xAxis : {
//Can be one of "linear", "logarithmic", "datetime" or "category".
type : 'category'
},
//y轴 标题
yAxis : {
title : {
text : '测试数据(%)'
},
labels : {
format : '{value} %'
},
//基准线
plotLines : [ {
//基准线类型 点线
dashStyle: 'Dash',
//The position of the line in axis units.
value : 80,
//The width or thickness of the plot line.
width : 1,
//y轴上的刻度线颜色
color : '#EE0000'
} ]
},
//当鼠标放在point上时，显示的单位/后缀
tooltip : {
//是否显示tip
enabled: true,
//是否可以比较
shared: false,
//可现实小数位数
valueDecimals: 1,
//前缀
valuePrefix : '',
//后缀
valueSuffix : '%'
},
//绘图项设置
plotOptions : {
line : {
//超过阀值的颜色
color: '#FF0000',
//未超过阀值后的颜色
negativeColor: '#0088FF',
//阀值
threshold : 80,
//线条 是否趋势成动画显示
animation: {
duration: 2000
}
}
},
//图例框
legend : {
enabled: true,
//The layout of the legend items. Can be one of "horizontal" or "vertical".
layout : 'vertical',
//The horizontal alignment of the legend box within the chart area. Valid values are "left", "center" and "right"
align : 'left',
//The vertical alignment of the legend box. Can be one of "top", "middle" or "bottom".
//Vertical position can be further determined by the y option. Defaults to bottom.
verticalAlign : 'top',
//The x offset of the legend relative to it's horizontal alignment align within chart.
x : 0,
//The vertical offset of the legend relative to it's vertical alignment verticalAlign within chart.
y : 100,
//The width of the drawn border around the legend. Defaults to 1.
borderWidth : 1
},
//去掉highChart网站连接url
credits : {
enable : true
},
//去掉导出按钮
exporting : {
enabled : true
},
//数据，个人认为这种方法，最强之处就在于series传值完全通过json。
series : json
});
}, "json");
});
</script>
</head>
<body>
<div id="container" style="min-width: 400px; height: 420px; margin: 0 auto"></div>
</body>
</html>
后台使用json传送数据。这里使用json的便利之处，就在数据的格式更佳灵活。开发人员能够更灵活的控制数据的传递。
/**
* 方法二：组织成json传送到前台
*/
public void updateChartAction2(){
List<Chart> c1 = chartService.getChartByName("beijing");
List<Chart> c2 = chartService.getChartByName("shanghai");
try {
JSONObject obj1 = this.writeJSON("beijing", c1);
JSONObject obj2 = this.writeJSON("shanghai", c2);
/**
* 组合成
* [
* name：xxx
* data: {[x1,y1],[x2,y2], ... }
* ]
*/
JSONArray all = new JSONArray();
all.put(obj1);
all.put(obj2);
HttpServletResponse response = ServletActionContext.getResponse();
response.setCharacterEncoding("UTF-8");
response.getWriter().write(all.toString());
response.getWriter().flush();
} catch (IOException e) {
e.printStackTrace();
}
}
public JSONObject writeJSON(String nameVlu, List<Chart> list) {
// 组合成{[x1,y1],[x2,y2], ... }
JSONArray jsonArray = new JSONArray();
for (int i = 0; i < list.size(); i++) {
JSONArray sub = new JSONArray();
sub.put(list.get(i).getcTime());
sub.put(list.get(i).getCdata());
jsonArray.put(sub);
}
/**
* 组合成 name：xxx data: {[x1,y1],[x2,y2], ... }
*/
JSONObject jsonObject = new JSONObject();
jsonObject.put("name", nameVlu);
jsonObject.put("data", jsonArray);
return jsonObject;
}