将滚动条保持在同一位置实时图表

Question

在 AmCharts 中创建实时图表时（示例：http://jsfiddle.net/amcharts/ATQUm/）似乎当一个触发 this.state.chart.validateData() 滚动条的范围被重置为完整范围，除非用户在同一位置单击并按住滚动条。

有没有办法在不按住按钮的情况下在更新数据时保持该范围？

Answer 1

假设您希望日期选择在更新之间保持不变，您可以在图表对象中将 zoomOutOnDataUpdate 设置为 false，滚动条将停留在选定的日期范围内；例如，如果您将 2017-07-01 放大到 2017-08-01，则更新之间仍会显示该日期范围。

Demo

如果您像演示中那样将旧点从图表中滑出，那么 zoomOutOnDataUpdate 就不太可行了，UI-wise，因为日期范围最终会随着时间的推移而下降这些点已被删除，您可能会在上面的演示中注意到（右侧滚动条手柄正在缓慢向左移动）。在这种情况下，您需要在更新后保持图表的当前 startIndex and endIndex and call zoomToIndexes，即

    var startIndex = chart.startIndex;
    var endIndex = chart.endIndex;
    chart.validateData();
    chart.zoomToIndexes(startIndex, endIndex);

Demo

仅供参考，您链接的 fiddle 使用旧版本的 AmCharts (v2)。我的 fiddle 正在使用最新的 v3 版本。

将滚动条保持在同一位置实时图表

Keeping scrollbar in same position live chart

amcharts