为morris图表添加了日期过滤组件

Added date filtering component to morris charts

本文关键字：日期 过滤 组件 添加 morris      更新时间：2023-09-26

我使用morris图表http://morrisjs.github.io/morris.js/bars.html

我面临的一个关键问题是添加一个选项，这样最终用户就可以通过数据范围过滤数据，比如今天或过去一个月等等。

这样一来，图表将更具互动性和实用性。

这样做的选择是什么。我正在使用startBootStrap模板，其中包含morris图表的库。

我使用过http://www.daterangepicker.com/#ex4并将其链接到我的休息呼叫以过滤数据

这是的简要代码

 function cb(start, end) {
        $('#reportrange span').html(start.format('MMM D, YYYY') + ' - ' + end.format('MMM D, YYYY'));
        //alert(start.format('MMM D, YYYY'));
        $.ajax({ url: 'http://127.0.0.1:7101/MUDRESTService/rest/v1/msessionchart?onlyData=true&fields=Sessionlength,Sessiontime&limit=10',
            
             type: 'get',  
             dataType: 'json',    
             success: function(output) {
                console.log(output) ; 
                var ddata = JSON.stringify(output.items);
                console.log('vik says');
                console.log(ddata);
                var arr = JSON.parse(ddata);
                bar.setData(arr);
             }
       
           });
    }
    cb(moment().subtract(29, 'days'), moment());
    $('#reportrange').daterangepicker({
        ranges: {
           'Today': [moment(), moment()],
           'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
           'Last 7 Days': [moment().subtract(6, 'days'), moment()],
           'Last 30 Days': [moment().subtract(29, 'days'), moment()],
           'This Month': [moment().startOf('month'), moment().endOf('month')],
           'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        }
    }, cb);
相关文章：