昨晚朋友给我说，她最近在实习，采集了一组数据，想要一个可以录入数据，并生成一副曲线图的工具。让我帮她写一个。上午抽空研究了一下Highcharts，写了一个。
朋友的需求是，有五个录入框，第一个是授粉天数，第2、3、4、5 个是四个植物的长度。 分别是：CK、1号、2号、3号。
最终的效果图为：
手动可以添加一行。 该行的五个框，录入自己的数据。
最后点击生成图片。即可生成图片。
本来我的思路是， 就单单写一个html页面，然后获取录入的数据，点击按钮的时候，拼装数据，生成图片。即，点击生成按钮的时候，执行一个生成图片的方法。 后来发现，该方法行不通。原因是，生成图形的X轴座标的时候，插件要求的数据格式是：
categories: ['1','5','19','20','21','22','23']
我手动拼了字符串，然后用变量代替的方法，放到该数组中。 可是不行，插件把我所有的录入数据当成了一条数据来渲染。。试了好多办法，均不可以。我猜测，插件只有在页面初次加载的时候渲染，才可以正常的生成图片。即卸载$(document).ready()；的时候才可以！看来只有通过把数据提交，然后获取该数据，然后再行渲染了。没有办法，只好写了一个web项目，然后通过从父页面写一个iframe，将数据录入框放到一个form中，提交的时候，将这个form提交。在servlet中，获取这些数据，拼装组合好，然后传入另外的模板，通过服务端模板渲染生成一串HTML代码，然后用iframe接收之。问题终于得以解决。
父页面的HTML代码为：
<!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">
<title>绘制曲线</title>
<script type="text/javascript" src="JS/jquery.min.js"></script>
<script type="text/javascript" src="JS/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript">
var index = 0 ;
function create_line(){
$("#index").val(index);
$("#sub_form").submit();
}
function del(obj){
$(obj).parent("div").remove();
}
function add(){
index = index + 1;
$("#content").append('<div>授粉天数：<input type="text" class=date name="date" /> CK：<input type="text" class=xhs name="xhs" />1号：<input type="text" class=yc name="yc" />2号：<input type="text" class=qingjiao name="qingjiao" />3号：<input type="text" class=sanhao name="sanhao" /><input type="button" value="删除当前行" οnclick="del(this)" /></div>');
}
</script>
<style type="text/css">
body{
line-height: 1;
font-size: 12px;
background-color: #FFFFFF;
}
#oprate{
margin-top:20px;
}
#frame,#main{
width:960px;
margin-left:auto;
margin-right:auto;
margin-top:10px;
}
#content{
margin-top:30px;
}
.xhs{
width:100px;
}
.yc{
width:100px;
}
.qingjiao{
width:100px;
}
.sanhao{
width:100px;
}
.date{width:100px}
.tip{
color:red;
margin-top:30px;
line-height:1.8em;
}
</style>
</head>
<body>
<div id="main">
<div class="tip">使用说明：植物的长度为手动录入，只需要填写长度即可，不必出现计量单位。且录入框中只允许出现数字，不允许出现字母及其他字符，亦不可出现空值，否则曲线图可能无法正常显示！录入一条完成后，如想继续录入，可
点击“增加一条记录” 按钮。如想删除某条记录，可点击该记录右侧的“删除当前行按钮”。全部录入完成后，点击生成曲线图，即可查看效果图！
</div>
<form action="drew" id="sub_form" target="targetiframe" method="post">
<div id="content">
<div>授粉天数：<input type="text" class=date name="date" /> CK：<input type="text" class=xhs name="xhs" />1号：<input type="text" class=yc name="yc" />2号：<input type="text" class=qingjiao name="qingjiao" />3号：<input type="text" class=sanhao name="sanhao" /></div>
</div>
<div id="oprate">
<input type="button" value="增加一条记录" οnclick="add()" />
<input type="button" value="生成曲线图" οnclick="create_line()" />
</div>
<input type="hidden" name="index" id="index" />
</form>
</div>
<div id="frame">
<iframe id="targetiframe" name="targetiframe" border='1' style="width:100%;height:500px" ></iframe>
</div>
</body>
</html>
页面采用的办法是，将form的target指向到当前页面的一个iframe上。然后提交这个form的时候，动作会在iframe上发生，这样页面看起来就不会刷新了。这也是最原始的无刷新的做法。原生的文件上传也是这个办法。
重点是iframe指向的页面的处理，即生成图形的页面。代码如下：
<%@ 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">
<title>Insert title here</title>
<script type="text/javascript" src="JS/jquery.min.js"></script>
<script src="JS/highcharts.js"></script>
<script src="JS/exporting.js"></script>
<script src="JS/grid.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#container').highcharts({
chart: {
type: 'spline'
},
title: {
text: '长度曲线图'
},
xAxis: {
categories: [${date}]
},
yAxis: {
min:0,
title: {
text: '长度'
},
labels: {
formatter: function() {
return this.value +'cm'
}
}
},
tooltip: {
crosshairs: true,
shared: true
},
plotOptions: {
spline: {
marker: {
radius: 4,
lineColor: '#666666',
lineWidth: 1
}
}
},
series: [{
name: 'CK',
data: [${xhs}]
}, {
name: '1号',
data: [ ${yc}]
}, {
name: '2号',
data: [ ${qingjiao}]
}, {
name: '3号',
data: [ ${sanhao}]
}]});
});
</script>
<style type="text/css">
body{
line-height: 1;
font-size: 12px;
background-color: #FFFFFF;
}
</style>
</head>
<body>
<div id="container" style="min-width: 310px; height: 480px; margin: 0 auto"></div>
</body>
</html>chart: {
type: 'spline'
},
这一行表示，图形的展示方式，默认的话，是直线连接，spline是曲线连接，即显得稍微圆滑一点，这也是同学的要求。
title: {
text: '长度曲线图'
},
图形上方显示的问题。
xAxis: {
categories: [${date}]
},
x轴座标，使用的el表达式，获取了后台的数据，date为之前页面传来的”授粉天数“ 这个数据，将其组合成插件识别的格式。
yAxis: {
min:0,
title: {
text: '长度'
},
labels: {
formatter: function() {
return this.value +'cm'
}
}
},
y轴座标。min：表示，y轴计数从0开始，可以调节。
formatter，格式化函数，将当前的值，即0,5,10 这些值，特殊处理，this.value 为值， return 后，则显示该变量。 现在我的会显示 5cm ，10cm。。。
series: [{
name: 'CK',
data: [${xhs}]
}, {
name: '1号',
data: [ ${yc}]
}, {
name: '2号',
data: [ ${qingjiao}]
}, {
name: '3号',
data: [ ${sanhao}]
}]
series 为数据，插件会解析该数据，并生成自己的形状，插件要求的数据格式为 数据 即 [1,2,3,4,5] 这种格式。 要显示多条曲线，则在这里面添加一组即可， 当然格式要符合要求。 其实就是 一个 数组内部包括了多个map 有几个map就有几条曲线。 map的name为曲线名称。 data为曲线数据。 该数据亦为数组。。。
这个插件最简单的就是这些了。！
文件地址：
http://download.csdn.net/detail/lxl631/7071395