<html>
<head>
<title>G2-plugin-slider.js Data slider plugin</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;width: 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": "Beijing" }, { "date": "2000-06-06"."aqi": 129."city": "Beijing" }, { "date": "2000-06-07"."aqi": 135."city": "Beijing" }, { "date": "2000-06-08"."aqi": 86."city": "Beijing" }, { "date": "2000-06-09"."aqi": 73."city": "Beijing" }, { "date": "2000-06-10"."aqi": 85."city": "Beijing" }, { "date": "2000-06-11"."aqi": 73."city": "Beijing" }, { "date": "2000-06-12"."aqi": 68."city": "Beijing" }, { "date": "2000-06-13"."aqi": 92."city": "Beijing" }, { "date": "2000-06-14"."aqi": 130."city": "Beijing" }, { "date": "2000-06-15"."aqi": 245."city": "Beijing" }, { "date": "2000-06-16"."aqi": 139."city": "Beijing" }, { "date": "2000-06-17"."aqi": 115."city": "Beijing" }, { "date": "2000-06-18"."aqi": 111."city": "Beijing" }, { "date": "2000-06-19"."aqi": 309."city": "Beijing" }, { "date": "2000-06-20"."aqi": 206."city": "Beijing" }, { "date": "2000-06-21"."aqi": 137."city": "Beijing" }, { "date": "2000-06-22"."aqi": 128."city": "Beijing" }, { "date": "2000-06-23"."aqi": 85."city": "Beijing" }, { "date": "2000-06-24"."aqi": 94."city": "Beijing" }, { "date": "2000-06-25"."aqi": 71."city": "Beijing" }, { "date": "2000-06-26"."aqi": 106."city": "Beijing" }, { "date": "2000-06-27"."aqi": 84."city": "Beijing" }, { "date": "2000-06-28"."aqi": 93."city": "Beijing" }, { "date": "2000-06-29"."aqi": 85."city": "Beijing" }];
    
</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>
Copy the code