SpringMVC+highstock實現曲線報表

　　最近項目要做曲線報表之前用的是生成圖片然後傳到前端感覺不是很好在網上找到資料說highstock就可以而且還可以做類似股票的那種實時的曲線研究的一段時間把項目問題解決了做個總結
    首先把highstockjs放到項目資源路徑下因為這個需要JQuery所以jqueryminjs也需要放而且在頁面引用是要先引用jqueryminjs再引用highstockjs剛開始做的時候沒注意頁面加載完後不出圖我做的這個圖還需要exportingjs所以也要放進項目資源文件夾中
頁面代碼
    <script type=text/javascriptsrc=${pagntextPath}/js/jqueryminjs></script>
    <script type=text/javascriptsrc=${pagntextPath}/js/highstockjs></script>
    <script type=text/javascriptsrc=${pagntextPath}/js/exportingjs></script>
    <script >
    $（document）ready（function（）{
    $（#sub）click（function（）{
    var names = [];
    $（input:checked[name=sms]）each（function（i e） {
    var ks = $（this）val（）
    if（ks == ） {
    namespush（ ）
    }
    else if （ks == ）{
    namespush（ ）
    }
    else if （ks == ）{
    namespush（ ）
    }
    else if （ks == ）{
    namespush（ ）
    }
    else if （ks == ）{
    namespush（ ）
    }
    else if （ks == ）{
    namespush（ ）
    }
    else if （ks == ）{
    namespush（ ）
    }
    }）
    var seriesOptions = []
    yAxisOptions = []
    seriesCounter =
    colors = HighchartsgetOptions（）colors;
    $each（names function（i name） {
    //後台讀取json數據
    $getJSON（<%=requestgetContextPath（）%>/JSONByAction?name=+name+toh=+ function（data） {
    //將json數據放入seriesOptions數組
    seriesOptions[i] = {
    name: name
    data: data
    };
    seriesCounter++;
    if （seriesCounter == nameslength） {
    //開始繪圖
    createChart（）
    }
    }）
    function createChart（） {
    windowchart = new HighchartsStockChart（{
    chart : {
    renderTo : container
    }
    rangeSelector : {
    selected :
    }
    title : {
    text : 濕度顯示
    }
    credits : {
    enabled : false//去掉右下角的標志
    }
    rangeSelector: {
    // 縮放選擇按鈕是一個數組

　　// 其中type可以是 millisecond second minute day week month ytd （year to date） year 和 all
    // 其中count是指多少個單位type
    // 其中text是配置顯示在按鈕上的文字
    buttons: [{
    type: month
    count:
    text: 月
    } {
    type: month
    count:
    text: 月
    } {
    type: month
    count:
    text: 月
    } {
    type: year
    count:
    text: 年
    }{
    type: year
    count:
    text: 年
    } {
    type: all
    text: 所有
    }]
    // 默認選擇域（縮放按鈕中的第一個）（縮放按鈕中的第二個）……
    selected:
    // 是否允許input標簽選框
    inputEnabled: false
    }
    //右上角日期區間格式化
    rangeSelector:{
    selected:
    inputDateFormat:%Y%m%d
    }
    xAxis: {
    type: datetime
    //x軸時間的格式化
    dateTimeLabelFormats: {
    second: %Y%m%d<br/>%H:%M:%S
    minute: %Y%m%d<br/>%H:%M
    hour: %Y%m%d<br/>%H:%M
    day: %Y<br/>%m%d
    week: %Y<br/>%m%d
    month: %Y%m
    year: %Y
    }
    }
    yAxis : {
    title : {
    text : 濕度
    }
    labels: {
    formatter: function（） {
    return （thisvalue > ? + : ） + thisvalue + %;
    }
    }
    }
    //彈出框的格式化顯示
    tooltip: {
    xDateFormat: %Y%m%d %A
    pointFormat: <span >{pointname}</span>: <b>{pointy}</b><br/>
    valueDecimals:
    }
    series :seriesOptions
    }）
    }
    }）
    }）
    }）
    </script>
    <div id=container ></div>
    後台其實就簡單了
    @SuppressWarnings（rawtypes）
    @RequestMapping（/queHumHistory）
    @ResponseBody
    public Map kan（HttpServletRequest requestHttpServletResponse response）{
    int id = IntegerparseInt（requestgetParameter（region））
    List<TempHumHistory> historyList = historyImplqueHistoryById（id）
    Map<String Object> modelMap = new HashMap<String Object>（）
    modelMapput（total ）
    modelMapput（data historyList）
    modelMapput（success true）
    return modelMap;
    }

From:http://tw.wingwit.com/Article/program/Java/ky/201311/28860.html