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

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'
    }
});