aaa

最新推荐文章于 2021-02-16 06:11:13 发布
wentise
最新推荐文章于 2021-02-16 06:11:13 发布
阅读量98
点赞数
分类专栏： batch 文章标签： javascript ViewUI
本文链接：https://blog.csdn.net/wentise/article/details/84410972
版权
batch 专栏收录该内容
2 篇文章 0 订阅
订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Flot Examples</title>
    <link href="layout.css" rel="stylesheet" type="text/css">
    <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
    <script language="javascript" type="text/javascript" src="../jquery.js"></script>
    <script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
    <script language="javascript" type="text/javascript" src="../jquery.flot.navigate.js"></script>
    <script language="javascript" type="text/javascript" src="../jquery.flot.selection.js"></script>
    <style type="text/css">
    #placeholder .button {
        position: absolute;
        cursor: pointer;
    }
    #placeholder div.button {
        font-size: smaller;
        color: #999;
        background-color: #eee;
        padding: 2px;
    }
    .message {
        padding-left: 50px;
        font-size: smaller;
    }
    </style>
 </head>
 <body>
    <h1>Flot Examples</h1>

    <div id="placeholder" style="width:600px;height:300px;"></div>

    <p class="message"></p>
    <p>
       <p>You selected: <span id="selection"></span></p>
       <input id="clearSelection" type="button" value="Clear selection" />
       <input id="setSelection" type="button" value="Select year 2k" />

     </p>
    <p>With the navigate plugin it is easy to add panning and zooming.
    Drag to pan, double click to zoom (or use the mouse scrollwheel).</p>

    <p>The plugin fires events (useful for synchronizing several
    plots) and adds a couple of public methods so you can easily build
    a little user interface around it, like the little buttons at the
    top right in the plot.</p>


<script type="text/javascript">
$(function () {
    // generate data set from a parametric function with a fractal
    // look

    var data = [ 
            {
            data: [[0, 2300],[20, 1500],[30, 5000]],
            lines: { show: true }
           // ,points: { show: true }
        },
        {

            data: [[10000,0 ], [10000, 0]]
        } ,
         {

            data: [[0,10000 ], [0, 10000]]
        } 
        ];


    var placeholder = $("#placeholder");
    var options = {
        series: { lines: { show: true  , fill: true}, shadowSize: 0 },
        xaxis: { zoomRange: [1, 10000], panRange: [0, 10000] },
        yaxis: { zoomRange: [1, 10000], panRange: [0, 10000] },
      /* zoom: {
            interactive: true
        },
        pan: {
            interactive: true
        },*/
        selection: { mode: "x" }
    };

    var plot = $.plot(placeholder, data, options);
    //selection start
    placeholder.bind("plotselected", function (event, ranges) {
    //alert(ranges.xaxis.from.toFixed(1));
        $("#selection").text(ranges.xaxis.from.toFixed(1) + " to " + ranges.xaxis.to.toFixed(1));

        var zoom = $("#zoom").attr("checked");
        if (zoom)
            plot = $.plot(placeholder, data,
                          $.extend(true, {}, options, {
                              xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to }
                          }));
    });

     $("#clearSelection").click(function () {
        plot.clearSelection();
    });

    placeholder.bind("plotunselected", function (event) {
        $("#selection").text("");
    });


        $("#setSelection").click(function () {
         var axes = plot.getAxes();
          plot.setSelection({ xaxis: { from: 2000, to: 2500 } });

          e.preventDefault();


    });
    //selection end


    // show pan/zoom messages to illustrate events 
    placeholder.bind('plotpan', function (event, plot) {
        var axes = plot.getAxes();
        $(".message").html("Panning to x: "  + axes.xaxis.min.toFixed(2)
                           + " – " + axes.xaxis.max.toFixed(2)
                           + " and y: " + axes.yaxis.min.toFixed(2)
                           + " – " + axes.yaxis.max.toFixed(2));
    });

    placeholder.bind('plotzoom', function (event, plot) {
        var axes = plot.getAxes();
        $(".message").html("Zooming to x: "  + axes.xaxis.min.toFixed(2)
                           + " – " + axes.xaxis.max.toFixed(2)
                           + " and y: " + axes.yaxis.min.toFixed(2)
                           + " – " + axes.yaxis.max.toFixed(2));
    });

    // add zoom out button 
    $('<div class="button" style="right:20px;top:20px">zoom out</div>').appendTo(placeholder).click(function (e) {
        e.preventDefault();
        plot.zoomOut();
    });
        // add zoom in button 
    $('<div class="button" style="right:90px;top:20px">zoom in</div>').appendTo(placeholder).click(function (e) {
        e.preventDefault();
        plot.zoom();
    });

//add dynamic curve start
    var updateInterval = 200;
    $("#updateInterval").val(updateInterval).change(function () {
        var v = $(this).val();
        if (v && !isNaN(+v)) {
            updateInterval = +v;
            if (updateInterval < 1)
                updateInterval = 1;
            if (updateInterval > 2000)
                updateInterval = 2000;
            $(this).val("" + updateInterval);
        }
    });


     function getRandomData() {
       var lastdata =data[0].data.length-1 ;
         var res =  new Array();
		var maxTime =data[0].data[lastdata][0];
		if(lastdata%2==0){

			var maxTimeVal =data[0].data[lastdata][1]-310*Math.random();
		}else{
			var maxTimeVal =data[0].data[lastdata][1]+300*Math.random();
		}

		var data1 = data[0].data;
   		data1.push([15+maxTime, maxTimeVal]);

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

    function update() {
   		var redata = getRandomData();
        plot.setData(redata);
        // since the axes don't change, we don't need to call plot.setupGrid()
        plot.draw();

        setTimeout(update, updateInterval);
    }

  update();
//add dynamic curve end



    // and add panning buttons

    // little helper for taking the repetitive work out of placing
    // panning arrows
    function addArrow(dir, right, top, offset) {

        $('<img class="button" src="arrow-' + dir + '.gif" style="right:' + right + 'px;top:' + top + 'px">').appendTo(placeholder).click(function (e) {
            plot.clearSelection();
            e.preventDefault();
            plot.pan(offset);
        });
    }

    addArrow('left', 55, 60, { left: -300 });
    addArrow('right', 25, 60, { left: 300 });
    addArrow('up', 40, 45, { top: -300 });
    addArrow('down', 40, 75, { top: 300 });
});
</script>

 </body>
</html>
wentise
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
aaa

[code="java"] Flot Examples #placeholder .button { position: absolute; cursor: pointer; } #placeholder div....
复制链接

扫一扫
专栏目录