首页 > 代码库 > 一次工作中用到的Highcharts.Chart

一次工作中用到的Highcharts.Chart

2024-07-19 22:46:56   211人阅读

一般动态获取图表信息都是通过ajax交互传送数据。

这次是一次性从后台返回集合后，直接在页面取数据绘制图表

引用js

<script type="text/javascript" src="http://www.mamicode.com/js//jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://www.mamicode.com/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

一次工作中用到的Highcharts.Chart


联系
我们