在zoomCallback上更新数据时，RangeSelector显示错误

Question

我正在尝试在缩放后更新图表数据。到目前为止，这使用zoomCallback。但是当我使用范围选择器进行缩放时， 范围选择器不再正确显示。使用范围选择器时，请参阅fiddle。

var data = [[1, 4, 5, 6], [2, 5, 6, 8], [3, 7, 4, 2], [4, 9, 6, 4]];

var gra = new Dygraph(
    document.getElementById("chart"),
    data,
    {
            labels: ["X", "Y1", "Y2", "Y3"],
            hideOverlayOnMouseOut : false,
            showRangeSelector: true,
            interactionModel: Dygraph.defaultInteractionModel,
            rangeSelectorHeight: 30,
            connectSeparatedPoints: true,
            legend: 'always',
            labelsDivWidth: 350,
    zoomCallback: function (minX, maxX, yRanges) {
        console.log("ZoomCallback!");
                updateDataOnZoom();
      },
}
);

function updateDataOnZoom() {
    var newData = [];

    for (var i = 0; i < data.length; i++) {
    var newDataElement = [data[i][0]]; // use old Y-Value
    for (var j = 1; j < data[i].length; j++) {
        newDataElement.push(data[i][j] + 100); // calculate new X-Values
    }
newData.push(newDataElement);
}

gra.updateOptions({
    file: newData
});
}

有没有办法解决范围选择器的显示错误？

提前致谢