标签：
/*****************************Controller(基于JFinal框架)**************/
package com.zzu.controller;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.List;
import org.jfree.chart.ChartFactory;
import org.jfree.chart.ChartUtilities;
import org.jfree.chart.JFreeChart;
import org.jfree.chart.StandardChartTheme;
import org.jfree.chart.plot.CategoryPlot;
import org.jfree.chart.renderer.category.LineAndShapeRenderer;
import org.jfree.data.category.DefaultCategoryDataset;
import com.google.gson.Gson;
import com.jfinal.core.Controller;
import com.jfinal.plugin.activerecord.Page;
import com.zzu.model.Parameter;
import com.zzu.model.Record;
import com.zzu.model.Record_V;
import com.zzu.model.recordinfo;
import com.zzu.util.GeneralService;
import com.zzu.service.RecordService;
/*JS折线图方法(从后台动态传值给前台，并用这些值画折线图，实现鼠标靠近折线图上任意节点，显示该节点温度，浓度等信息）*/
public void getProjectChart(){
int port_id=1;
String starttime=getPara("starttime").replace("/_/g","-");
starttime=GeneralService.charReplace(starttime,"_","-");
String endtime=getPara("endtime").replace("/_/g","-");
endtime=GeneralService.charReplace(endtime,"_","-");
int parameter_id=getParaToInt("parameter_id");
System.out.print("parameter_id="+parameter_id);
List<Record> records=new ArrayList<Record>();
records=recordService.recordList(parameter_id,port_id,starttime,endtime);//获取某个时间段内某种参数对应的检测记录
List<recordinfo> tm=new ArrayList<recordinfo>();
for(int i=0;i<records.size();i++){
recordinfo tm1=new recordinfo();
Record r=records.get(i);
tm1.setTemperature(r.getDouble("temperature"));
tm1.setDensity(r.getDouble("density"));
tm1.setSamping_time(formatter.format(r.getTimestamp("samping_time")));//将数据库中(bigint)samping_time以yyyy-MM-dd HH:mm:ss形式输出
tm.add(tm1);
}
setAttr("tm",tm);//tm为对象数组，每个对象都有temperature和density属性
ToGson(tm);//是为了向前台传链表List<Temperature> tm 键值对即：{temperature：值}
}
public void ToGson(Object object) {
//转换Gson格式
Gson gson=new Gson();
String str=gson.toJson(object);
try {
getResponse().getOutputStream().write(str.getBytes("UTF-8"));
} catch (UnsupportedEncodingException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
/*****************************html**************/
<script type="text/javascript">
function doSubmit(){ //原来的折线图展示不出来原因是js里边变量和函数执行顺序没有搞正确。
var starttime=document.getElementById("starttime").value;
var endtime=document.getElementById("endtime").value;
var parameter_id=document.getElementById("parameter_id").value;
var portId=document.getElementById("port_id").value;
if(starttime==""){
starttime="0000-00-00";
}
if(endtime==""){
endtime="9999-99-99";
}
// 此为正则表达式 /-/g 把所有的- 变成 _ 也可以(‘-‘,‘_‘)，但只替换第一个-
starttime=starttime.replace(/-/g,‘_‘);
endtime=endtime.replace(/-/g,‘_‘);
$.ajax({
type:"post",
dataType:"json",
data: {"starttime":starttime,"endtime":endtime,"parameter_id":parameter_id,"port_id":portId}, //参数列表
async:false,
url:"/WaterSys/record/getProjectChart",
success: function (data) {
var Options = {
chart: {
renderTo: ‘chartPro‘,//将折线图放在id为chartPro的容器里边
type: ‘line‘//设置图类型为折线型
},
title: {
text: ‘水参数走势图‘,
x: -20 //center
},
xAxis: {
title: {
text: ‘时间‘
},
},
yAxis: {
title: {
text: ‘数值‘
},
min: 0,
plotLines: [{
value: 0,
width: 1,
color: ‘#808080‘
}]
},
credits: { enabled:false },//去掉水印
exporting:{ enabled:false},//去掉导出按钮
legend: {
layout: ‘vertical‘,
align: ‘right‘,
verticalAlign: ‘middle‘,
borderWidth: 0
},
series: [{
name: ‘温度‘,
color:‘green‘,
},{
name: ‘浓度‘,
color:‘red‘,
}]
};
tm_arr=[];//建立温度数组，接收从后台传来的温度值，并赋给Options.series[0].data即series的‘温度‘值
dy_arr=[];//建立浓度数组，接收从后台传来的浓度值，并赋给Options.series[1].data即series的‘浓度‘值
time_arr=[];//建立时间数组，接收从后台传来的时间值，并赋给Options.xAxis.categories即xAxis的‘时间‘值
for (i in data) {
var r = data[i];
tm_arr.push(r.temperature);//
dy_arr.push(r.density);//
time_arr.push(r.samping_time);//
}
Options.series[0].data = tm_arr;
Options.series[1].data = dy_arr;
Options.xAxis.categories = time_arr;
var chart = new Highcharts.Chart(Options);
},
cache: false
});
};
</script>
<body onload="doSubmit()">
<table>
<tr>
<td>请选择参数名称</td>
<td>
<select name="parameter_id" id="parameter_id">
<#list pList as pl>
<option value ="${pl.parameter_id}">${pl.parameter_name}</option>
</#list>
</select>
</td>
<td>请选择时间范围:</td>
<td><input type="text" style="width:100px" id="starttime" name="starttime" class="date" /></td>
<td>——</td>
<td><input type="text" style="width:100px" id="endtime" name="endtime" class="date" /></td>
<td><input type="button" onclick="doSubmit()" value="确定" /></td>
</tr>
</table>
<input type="hidden" id="port_id" value="${port_id}"/>
<div id="chartPro" style=" width: 100%; height: 100%; " ><br/><br/><br/><center><span class="img_loading" title="加载中"></span></center></div>
</body>
HighCharts绘制JS折线图（后台传数据给前台基于JFinal框架）
标签：
原文地址：http://www.cnblogs.com/zsy-2015-10-18/p/4984686.html
