以前做过highcharts生成曲线图的功能，但是那只是知道固定的X轴和Y轴固定的。只有一对，所以传过来的数据比较好处理。但是如果有多个Y轴数据呢？我们改如何处理？这就需要highcharts动态生成曲线图。
看代码：
后台代码：
写道
/**
* charts的生成
* @return
*/
@RequestMapping("charts")
public String charts(Model model){
String x="\"field0\":\"1\",\"2\",\"3\",\"4\",\"5\",\"6\",\"7\",\"8\",\"9\",\"10\",\"11\",\"12\"";
String ys="\"field1\":\"88\",\"59\",\"57\",\"58\",\"56\",\"54\",\"79\",\"51\",\"76\",\"87\",\"56\",\"74\";"
+ "\"field2\":\"23\",\"45\",\"25\",\"12\",\"67\",\"90\",\"56\",\"34\",\"56\",\"12\",\"23\",\"44\";"
+ "\"field3\":\"65\",\"23\",\"12\",\"11\",\"10\",\"3\",\"1\",\"34\",\"21\",\"22\",\"67\",\"99\";";
model.addAttribute("x", x);
model.addAttribute("ys", ys);
return "/empfile/emp2";
}
* charts的生成
* @return
*/
@RequestMapping("charts")
public String charts(Model model){
String x="\"field0\":\"1\",\"2\",\"3\",\"4\",\"5\",\"6\",\"7\",\"8\",\"9\",\"10\",\"11\",\"12\"";
String ys="\"field1\":\"88\",\"59\",\"57\",\"58\",\"56\",\"54\",\"79\",\"51\",\"76\",\"87\",\"56\",\"74\";"
+ "\"field2\":\"23\",\"45\",\"25\",\"12\",\"67\",\"90\",\"56\",\"34\",\"56\",\"12\",\"23\",\"44\";"
+ "\"field3\":\"65\",\"23\",\"12\",\"11\",\"10\",\"3\",\"1\",\"34\",\"21\",\"22\",\"67\",\"99\";";
model.addAttribute("x", x);
model.addAttribute("ys", ys);
return "/empfile/emp2";
}
通过把x轴的数据和Y轴的数据，放到页面上。
前台页面：
引入jQuery和highcharts.js这个引入就可以了。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../../static/lib/jquery/jquery-1.11.2.min.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
$(document).ready(function(){
alert("jquery正常工作");
});
$(function () {
var x='<%=request.getAttribute("x")%>';//接收从后台传的x数据
x=x.split(":")[1];//取出x数组
x=x.replace(/\"/g,"");//去掉双引号
x=x.split(",");//拆分出数组
var ys='<%=request.getAttribute("ys")%>';//接收从后台传的y数据
ys=ys.split(";");//取出有多少个y轴数据
//曲线展示区域代码
$('#container').highcharts({
chart: {
type: 'line'
},
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
categories:x
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
}
});
for(var m=0;m<ys.length;m++){
var y=ys[m].replace(/\"/g,"");//先取出所有的双引号
var name=y.split(":")[0];//取出y轴的名字，也就是filed字段的名字
y=y.split(":")[1];//取出y轴数组
y=y.split(",");
var array=new Array();//保证y轴的数组必须是数字数组
for(var i=0;i<y.length;i++){
array.push(parseInt(y[i]));
}
//填充Series序列数组
$('#container').highcharts().addSeries({// name:name, data:array });
}
// $('#container').highcharts().addSeries({
// name:'fffffff',
// data:[3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
// });
// $('#container').highcharts().addSeries({
// name:'ggggggggg',
// data:[3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 50]
// });
alert( $('#container').highcharts().series[0].name);
alert( $('#container').highcharts().series[0].data);
});
</script>
</head>
<body>
<div>${x}</div><br>
<div>${ys}</div>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
<script src="../../static/highcharts.js"></script>
</html>
核心方法就是addSeries，其他的很简单。主要注意的是Y轴传的数组一定要是数字数组。X轴只要是数组就可以了。