报表制作一 基于jquery.flot.js制作一个动态报表

jquery  也是可以做报表的  今天接触到集中报表是用jquery做的  
1.移动线报表
需要的js文件有


<!-- jQuery 可以做报表-->
 <script src="/bower_components/jquery/dist/jquery.min.js"></script>  //这是一个基础表
  <!-- Bootstrap Core JavaScript 控制布局-->
  <script src="${pageContext.request.contextPath}/js/usermang/mall/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>//这个是h5控制布局的一个基础表
   <!-- 移动报表的必须表 -->
   <script src="${pageContext.request.contextPath}/js/usermang/mall/bower_components/flot/jquery.flot.js"></script>  这个是移动表的基础表


   对应的控件
   <div class="flot-chart">
    <div class="flot-chart-content" id="flot-line-chart-moving"></div>
   </div>


//Flot Moving Line Chart  移动表的js控制对表的初始化化


$(function() {//页面自主加载的函数


    var container = $("#flot-line-chart-moving");//得到控件的dom


    // Determine how many data points to keep based on the placeholder's initial size;  确定有多少数据点保持基于占位符的初始大小;
    // this gives us a nice high-res plot while avoiding more than one point per pixel. 这给了我们一个很好的高分辨率的阴谋,同时避免多个每像素点。


    var maximum = container.outerWidth() / 2 || 300;


    //


    var data = [];//浮动数据组


    function getRandomData() {//得到随机数   如果做动态的数据表的话  这个函数可以用异步  定时请求服务器  得到数据


        if (data.length) {
            data = data.slice(1);
        }


        while (data.length < maximum) {
            var previous = data.length ? data[data.length - 1] : 50;
            var y = previous + Math.random() * 10 - 5;
            data.push(y < 0 ? 0 : y > 100 ? 100 : y);
        }


        // zip the generated y values with the x values


        var res = [];
        for (var i = 0; i < data.length; ++i) {
            res.push([i, data[i]])
        }


        return res;//返回数据组
    }


    //


    series = [{
        data: getRandomData(),//把数据反应到报表上
        lines: {
            fill: true
        }
    }];


    //


    var plot = $.plot(container, series, {//报表初始化化
        grid: {
            borderWidth: 1,
            minBorderMargin: 20,
            labelMargin: 10,
            backgroundColor: {
                colors: ["#fff", "#e4f4f4"]
            },
            margin: {
                top: 8,
                bottom: 20,
                left: 20
            },
            markings: function(axes) {
                var markings = [];
                var xaxis = axes.xaxis;
                for (var x = Math.floor(xaxis.min); x < xaxis.max; x += xaxis.tickSize * 2) {
                    markings.push({
                        xaxis: {
                            from: x,
                            to: x + xaxis.tickSize
                        },
                        color: "rgba(232, 232, 255, 0.2)"
                    });
                }
                return markings;
            }
        },
        xaxis: {//x轴的控制
            tickFormatter: function() {
           
                return "";
            }
        },
        yaxis: {
            min: 0,
            max: 110
        },
        legend: {
            show: true
        }
    });


    // Update the random dataset at 25FPS for a smoothly-animating chart


    setInterval(function updateRandom() {
        series[0].data = getRandomData();//动态数据初始化
        plot.setData(series);
        plot.draw();//把报表在页面进行初始化
    }, 40);


});