HighCharts繪製JS折線圖（後臺傳數據給前臺基於JFinal框架）

/*****************************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>