Google图表如何根据月份和年份过滤图表？

Question

我想实现一个 AreaChart，我可以在其中根据月份进行过滤。例如，我想过滤 2021-1 到 2021-5 期间没有一天，因为我检索了每个特定月份的总值。年份和月份不被识别为日期，过滤器不起作用。我怎样才能使这项工作？

HTML:

   <div id="dashboard_div">
   <div id="filter_div"></div>
   <div id="graph-month"></div>
   </div>

JQuery:

        function drawAreaChart(){
            google.charts.load('current', {'packages': ['corechart', 'controls', 'table']});

        google.charts.setOnLoadCallback(drawChart);


        function drawChart() {
            $.ajax({
                type: 'GET',
                url: 'testurl',
                dataType: "json",
                success: function (result) {
             
                    var data = new google.visualization.DataTable();

                    // Create a dashboard.
                    var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));


                 
                    data.addColumn('number', 'month');
                    data.addColumn('number', 'Total');


                   // This is the json I retrieve from the AJAX call

                     var jsondata = [{"year":2021,"month":1,"total":3242}, 
                     {"year":2021,"month":2,"total":2134}, 
                     {"year":2021,"month":3,"total":2321}];

                    $.each(result, function (index, row) {
                        data.addRow([
                            parseFloat(new Date(row.year, row.month)),
                            parseFloat(row.total)
                        ]);
                    });

                    var filter = new google.visualization.ControlWrapper({
                        'controlType': 'NumberRangeFilter',
                        'containerId': 'filter_div',
                        'options': {
                            'filterColumnLabel': 'month'},
                        'ui': {
                            'allowTyping': false,
                            'allowMultiple': false,
                            'labelStacking': 'vertical'
                        }
                    });

                    // Create a pie chart, passing some options
                            var aChart = new google.visualization.ChartWrapper({
                                'chartType': 'AreaChart',
                                'containerId': 'graph-month',
                                'options': {
                                    'pieSliceText': 'value',
                                    'legend': 'right'
                                }
                            });

                    dashboard.bind(filter, aChart );

                    var options = {
                        title: 'Total per month',
                        hAxis: {title: ,
                        vAxis: {minValue: 0}
                    };


                    dashboard.draw(data, options);

                }
            });
         }
        }

Answer 1

看来您是在强制日期为数字，
你绝对可以改用日期...

此处，将列添加到日期时更改类型...

data.addColumn('date', 'month');
data.addColumn('number', 'Total');

然后在添加行时，从日期中删除 parseFloat...

$.each(result, function (index, row) {
  data.addRow([
    new Date(row.year, row.month),
    parseFloat(row.total)
  ]);
});

那么你应该可以使用 DateRangeFilter，这里...

var filter = new google.visualization.ControlWrapper({
    'controlType': 'DateRangeFilter',
    'containerId': 'filter_div',
    'options': {
        'filterColumnLabel': 'month'},
    'ui': {
        'allowTyping': false,
        'allowMultiple': false,
        'labelStacking': 'vertical'
    }
});

Google图表如何根据月份和年份过滤图表？

Google Charts how to filter charts based on month and year?

javascript

jquery

charts

google-visualization