zoukankan      html  css  js  c++  java
  • g2-plugin-slider.js 数据滚动条插件

    <html>
    <head>
    <title>g2-plugin-slider.js 数据滚动条插件</title>
    <link href="https://cdn.bootcss.com/vis/4.21.0/vis.min.css" rel="stylesheet">
    <style type="text/css">
        .m-slider-wrapper {position: fixed;bottom:3px;left:320px; 800px;}
    </style>
    </head>
    <body>
    <div class="m-slider-wrapper">
        <div id="m-slider"></div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <script src="js/g2.min.js"></script>
    <script src="js/g2-plugin-slider.js"></script>
    <script type="text/javascript">
    var data = [{ "date": "2000-06-05", "aqi": 116, "city": "北京" }, { "date": "2000-06-06", "aqi": 129, "city": "北京" }, { "date": "2000-06-07", "aqi": 135, "city": "北京" }, { "date": "2000-06-08", "aqi": 86, "city": "北京" }, { "date": "2000-06-09", "aqi": 73, "city": "北京" }, { "date": "2000-06-10", "aqi": 85, "city": "北京" }, { "date": "2000-06-11", "aqi": 73, "city": "北京" }, { "date": "2000-06-12", "aqi": 68, "city": "北京" }, { "date": "2000-06-13", "aqi": 92, "city": "北京" }, { "date": "2000-06-14", "aqi": 130, "city": "北京" }, { "date": "2000-06-15", "aqi": 245, "city": "北京" }, { "date": "2000-06-16", "aqi": 139, "city": "北京" }, { "date": "2000-06-17", "aqi": 115, "city": "北京" }, { "date": "2000-06-18", "aqi": 111, "city": "北京" }, { "date": "2000-06-19", "aqi": 309, "city": "北京" }, { "date": "2000-06-20", "aqi": 206, "city": "北京" }, { "date": "2000-06-21", "aqi": 137, "city": "北京" }, { "date": "2000-06-22", "aqi": 128, "city": "北京" }, { "date": "2000-06-23", "aqi": 85, "city": "北京" }, { "date": "2000-06-24", "aqi": 94, "city": "北京" }, { "date": "2000-06-25", "aqi": 71, "city": "北京" }, { "date": "2000-06-26", "aqi": 106, "city": "北京" }, { "date": "2000-06-27", "aqi": 84, "city": "北京" }, { "date": "2000-06-28", "aqi": 93, "city": "北京" }, { "date": "2000-06-29", "aqi": 85, "city": "北京" }];
        
    </script>
    <script>
    $(function () {
        var myAction = {};
        var dom = {
            slider: $("#m-slider")
        };
    
        $.extend(myAction, {
            initSlider: function () { 
                //dom.slider.html('');
                var slider = new Slider({
                    container: 'm-slider',
                    data,
                    xAxis: 'date',
                    yAxis: 'aqi',
                    onChange: function (obj) {
                        console.log(obj.startText + ':' + obj.endText);
                    }
                });
                slider.render();            
            }              
        })
    
        var init = function () {
            myAction.initSlider();
        }();
    });	
    </script>
    </body>
    </html>
  • 相关阅读:
    Android 中设置全屏和无标题模式
    轻松管理安卓应用中的log打印信息
    使用Cocos2d游戏引擎开发火热的植物大战僵尸游戏
    Android中获取系统通讯录联系人并显示在EditText
    使用json解析国家气象局(天气预报)接口数据
    Android中简单的日期格式化
    Android的消息推送技术Androidpn
    格式化日期和时间详细介绍
    智能短信管家 V1.0版本正式上线啦!
    学用MVC4做网站一:用户登陆1.2
  • 原文地址:https://www.cnblogs.com/xutongbao/p/9924835.html
Copyright © 2011-2022 走看看