昨晚朋友給我說，她最近在實習，採集了一組數據，想要一個可以錄入數據，並生成一副曲線圖的工具。讓我幫她寫一個。上午抽空研究了一下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