javascript - 将范围限制为仅在 Google 图表中显示 x 个月

Question

我正在尝试限制折线图中显示的日期范围。

当前图表:

我想限制从今天(当前日期)起最近 3 个月内显示的结果数量，但我不知道如何做到这一点。我研究过使用 ChartRangeFilter在诸如此类的帖子 here ，但这需要用户做过滤；我希望用户加载图表后立即限制结果。

我考虑过(不知道如何实现这些):

1. 限制 ticks在 Google 图表中显示最近 3 个刻度
2. 使用 Python 过滤过去 3 个月的 BigQuery JSON 结果(在结果发送到 Google Charts 之前)

JSON:

{
"rows": [{
    "c": [{
        "v": "2010-10"
    }, {
        "v": 5
    }]
}, {
    "c": [{
        "v": "2012-11"
    }, {
        "v": 43
    }]
}, {
    "c": [{
        "v": "2016-12"
    }, {
        "v": 59
    }]
}, {
    "c": [{
        "v": "2016-01"
    }, {
        "v": 50
    }]
}, {
    "c": [{
        "v": "2011-02"
    }, {
        "v": 37
    }]
}, {
    "c": [{
        "v": "2016-03"
    }, {
        "v": 38
    }]
}, {
    "c": [{
        "v": "2016-04"
    }, {
        "v": 46
    }]
}, {
    "c": [{
        "v": "2016-05"
    }, {
        "v": 45
    }]
}, {
    "c": [{
        "v": "2016-06"
    }, {
        "v": 22
    }]
}, {
    "c": [{
        "v": "2011-07"
    }, {
        "v": 10.0
    }]
}, {
    "c": [{
        "v": "2011-08"
    }, {
        "v": 50
    }]
}, {
    "c": [{
        "v": "2016-09"
    }, {
        "v": 7
    }]
}, {
    "c": [{
        "v": "2016-10"
    }, {
        "v": 14
    }]
}, {
    "c": [{
        "v": "2016-11"
    }, {
        "v": 55
    }]
}],
"cols": [{
    "type": "string",
    "id": "SalesDate",
    "label": "SaleDate"
}, {
    "type": "number",
    "id": "InventoryPercent",
    "label": "InventoryPercent"
}]
}

期望结果:

//via Python - returns only these values to be displayed in chart
"v": "2016-09"    "v": 7
"v": "2016-10"    "v": 14
"v": "2016-11"    "v": 55

所需图表:

<小时/>

我尝试了第一种方法，但它不起作用:

JavaScript:

$.get('/sales_data', function(response) {
    salesData = JSON.parse(response);
    // Set a callback to run when the Google Visualization API is loaded.
    google.charts.setOnLoadCallback(drawChart);
});

function drawChart() {
    //3 ticks for tick count
    function formatMonth() {
        var today = newDate();
        var salesMonth;
        for (var x = 2; x >= 0; x--) {
        salesMonth = moment(new Date(today.getFullYear(), today.getMonth() - x).format("YYYY-MM");
        console.log(salesMonth);
        }
    }

    var chartOptions = {
        vAxis: {
            minValue: 0,
            maxValue: 100,
            interpolateNulls: true,
            visible: true,
            gridlines: { count: 5},
            ticks: { //tick count - limit to last 3 months
                format: function() {
                return formatMonth();
            }
        }

我如何将范围限制为仅显示过去 3 个月？

Answer 1

过滤服务器/源上的数据可能更有意义，
这将减少客户端处理的数据量

但是，谷歌确实提供了在绘制之前处理过滤的方法

您可以结合使用 setRows 和 getFilteredRows 方法来创建 DataView

请参阅以下工作片段...

首先，从 json 创建一个 DataView，它将第一列转换为真实日期

然后使用setRows和getFilteredRows来限制最近3个月

然后 DataView 中每行的日期用于 hAxis 刻度

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart', 'table']
});

function drawChart() {
  var dataTable = new google.visualization.DataTable({
    "rows": [{
        "c": [{
            "v": "2010-10"
        }, {
            "v": 5
        }]
    }, {
        "c": [{
            "v": "2012-11"
        }, {
            "v": 43
        }]
    }, {
        "c": [{
            "v": "2016-12"
        }, {
            "v": 59
        }]
    }, {
        "c": [{
            "v": "2016-01"
        }, {
            "v": 50
        }]
    }, {
        "c": [{
            "v": "2011-02"
        }, {
            "v": 37
        }]
    }, {
        "c": [{
            "v": "2016-03"
        }, {
            "v": 38
        }]
    }, {
        "c": [{
            "v": "2016-04"
        }, {
            "v": 46
        }]
    }, {
        "c": [{
            "v": "2016-05"
        }, {
            "v": 45
        }]
    }, {
        "c": [{
            "v": "2016-06"
        }, {
            "v": 22
        }]
    }, {
        "c": [{
            "v": "2011-07"
        }, {
            "v": 10.0
        }]
    }, {
        "c": [{
            "v": "2011-08"
        }, {
            "v": 50
        }]
    }, {
        "c": [{
            "v": "2016-09"
        }, {
            "v": 7
        }]
    }, {
        "c": [{
            "v": "2016-10"
        }, {
            "v": 14
        }]
    }, {
        "c": [{
            "v": "2016-11"
        }, {
            "v": 55
        }]
    }],
    "cols": [{
        "type": "string",
        "id": "SalesDate",
        "label": "SaleDate"
    }, {
        "type": "number",
        "id": "InventoryPercent",
        "label": "InventoryPercent"
    }]
    }
  );
  dataTable.sort([{column: 0, desc: true}]);

  var datePattern = 'yyyy-MM';
  var formatDate = new google.visualization.DateFormat({pattern: datePattern});

  var dataView = new google.visualization.DataView(dataTable);
  dataView.setColumns([
    // date column
    {
      calc: function (dt, row) {
        var dateParts = dt.getValue(row, 0).split('-');
        var dateValue = new Date(parseInt(dateParts[0]), parseInt(dateParts[1]) - 1, 1);
        return {
          v: dateValue,
          f: formatDate.formatValue(dateValue)
        }
      },
      type: 'date',
      label: dataTable.getColumnLabel(0)
    },
    // inventory
    1
  ]);

  var today = new Date();
  var last3Months = new Date(today.getFullYear(), today.getMonth() - 3, today.getDate());

  dataView.setRows(dataView.getFilteredRows([{
    column: 0,
    minValue: last3Months
  }]));

  var hAxisTicks = [];
  for (var i = 0; i < dataView.getNumberOfRows(); i++) {
    hAxisTicks.push(dataView.getValue(i, 0));
  }

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(dataView, {
    hAxis: {
      format: datePattern,
      ticks: hAxisTicks
    }
  });

  var table = new google.visualization.Table(document.getElementById('table_div'));
  table.draw(dataView);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<div id="table_div"></div>