Google图表：在图表中设置精确的日期边界（使用过滤器滑块时）

Question

我在网站上显示一个或多个时间图。我正在使用DateRangeSlider，因此用户可以输入他们想要检查的确切时间。理想情况下，我希望用户能够在一段时间内拨号，而且这个时间应该在图表上显示。但是，图表将始终从过滤集中的第一个可用数据点开始。例如，我拨打21-01-2019作为开始日期，但下一个Datapoint仅在24-01-2019，那么图表也将在该日期开始。对于我的用户而言，如果图表在第一个数据点之前保持空白状态会更好，但实际上从21-01-2019开始。更好的方法是采用过滤集之外的第一个数据点，并且仍然在集合的最后一个局外人和内部的第一个点之间显示一条线。

这是我到目前为止使用的代码：


var dashboard = new google.visualization.Dashboard(chartSliderPos);

var rangeSlider = new google.visualization.ControlWrapper({
    'controlType': 'DateRangeFilter',
    'containerId': chartSliderPos,
    'options': {
    'filterColumnLabel': 'Time',
    'ui': {
        'step': 'hour'
        }
    }
});

// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable();
data.addColumn("date", "Time");
data.addColumn("number", "Value");
data.addRows(resultArray);

// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.ChartWrapper({
    'chartType': 'SteppedAreaChart',
    'containerId': pos,
    'options': {
        'width': 750,
        'height': 300,
        'explorer': {},
        'legend': 'none'
    }
});
dashboard.bind(rangeSlider, chart);

//callback for slider manipulation 
chartsArray.push( function(a, b) {
    rangeSlider.setState({'lowValue': a, 'highValue': b});
    rangeSlider.draw();
});

dashboard.draw(data);

正如您所看到的，范围滑块的另一个日期比图表显示的日期要多，因为下一个数据点只能在以后使用。

编辑：通过查看谷歌的例子，我找到了一个例子，其中范围滑块完全符合我的要求。但是，我不需要注释图表，我不知道是什么让这个工作在这个例子中。示例：https://developers.google.com/chart/interactive/docs/gallery/annotationchart