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 Camera 如何判断当前使用的摄像头是前置还是后置
    Unity3D中调用外接摄像头,并保存为图片文件
    Android Camera 使用小结
    Android开发之初识Camera图像采集
    android studio 常用快捷键
    Windows下虚拟机安装Mac OS X —– VM12安装Mac OS X 10.11
    unity调android ios 浏览器 uniwebview2.1使用
    unity语言本地化插件 I2 Location2.5.6使用简单记录
    Unity中内嵌网页插件UniWebView使用总结
    ugui mask失效
  • 原文地址:https://www.cnblogs.com/xutongbao/p/9924835.html
Copyright © 2011-2022 走看看