/*****************************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 οnlοad="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" οnclick="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>
转载于:https://www.cnblogs.com/zsy-2015-10-18/p/4984686.html
相关资源：highcharts实现从mysql数据库获取数据生成折线图