一次工作中用到的Highcharts.Chart

一般動態獲取圖表信息都是通過ajax交互傳送數據。

這次是一次性從后台返回集合后，直接在頁面取數據繪制圖表

引用js

<script type="text/javascript" src="/js//jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/js/Highcharts-3.0.7/js/highcharts.js"></script>

頁面返回的集合有三個字段

 ${listDailyActivity.lastvisit}是時間格式 2014-08-05

${listDailyActivity.visitNum}是數量 這兩個字段用於繪制簡單的時間曲線 每天訪問量

　　　　　　　　　　　　　　　　　　　　<c:set var="num" value="0" />
                                    <c:forEach items="${listDailyActivity}" var="listDailyActivity" varStatus="L">
                                        <tr class="firstalt1">
                                            <td align="center">
                                                <input type="hidden" id="data${L.index}" value="${listDailyActivity.lastvisit}"/>
                                                ${listDailyActivity.lastvisit}
                                            </td>
                                            <td align="center">${listDailyActivity.rank}</td>
                                            <td align="right">
                                                <input type="hidden" id="Daily${L.index}" value="${listDailyActivity.visitNum}"/>
                                                ${listDailyActivity.visitNum}
                                            </td>
                                        </tr>
                                        <c:set var="num" value="${num+1}" />
                                    </c:forEach>
                                    <tr style="display: none"><td><input type="hidden" value="${num}" id="totalNum"/></td></tr>

js代碼如下

<script type="text/javascript">
var chart1; // 全局變量
$(document).ready(function() {    
    var totalNum = $("#totalNum").val();//頁面數據記錄條數
    var st1=new Array();
    for(var i=totalNum-1;i>=0;i--){//組裝數組數據
        var st2=new Array();
        var tt = $("#data"+i).val();
        var ttt = $("#Daily"+i).val();
        st2.push(Date.UTC(tt.split("-")[0],tt.split("-")[1]-1,tt.split("-")[2]));
        st2.push(parseInt(ttt));
        st1.push(st2);
    }
    chart1 = new Highcharts.Chart({
         credits: {  enabled: false},//去掉highcharts.com商標
            exporting: { enabled: false },  //去掉chart不必要屬性
         chart: { renderTo: 'container', type: 'line' },
         title: { text: '月內每日統計' },
         tooltip: {
              xDateFormat: '%Y-%m-%d, %A'//鼠標移動到趨勢線上時顯示的日期格式
         },
         xAxis: {type: 'datetime',
             dateTimeLabelFormats : { 
                day : '%m-%d',
                //second: '%H:%M:%S',
                   // minute: '%e. %b %H:%M',
                  //  hour: '%b/%e %H:%M',
                  //  day: '%e日/%b',
                   // week: '%e. %b',
                   // month: '%b %y',
                   // year: '%Y'
            },
            tickInterval: 2*24 * 3600 * 1000//間隔2天
        },
         yAxis: {title: { text: '訪問數', }, min:'0' },
         series: [{
            name: '訪問數',
            data:st1　　//用的數組格式[[Date.UTC(2014,7,19), 22],[Date.UTC(2014,7,20), 29],[Date.UTC(2014,7,21), 38]]

　　　　　　　　　　　　　　//Date.UTC是一種時間格式化函數 

}] }); }); </script>

 效果圖

更多請看中問官網：http://www.hcharts.cn/index.php