<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>