ExtJS 6复位图可编程缩放

Question

我如何能够重置缩放(显示整个图表)的简单线图编程？我在文档中找不到合适的方法。

我使用Ext.chart.interactions.CrossZoom如果它的元。

Answer 1

在undoZoom CrossZoom 班级中有一个无文档的班级方法。您可以这样使用它：

chart.getInteraction('crosszoom').undoZoom();

编辑

交叉缩放交互使历史缩放保持在zoomHistory属性中。undoZoom方法返回，一步一步/一次缩放，沿着缩放历史。

基于undoZoom方法，我创建了一个直接将图表重置为其初始缩放的resetZoom方法：

Ext.define(null, {
    override: 'Ext.chart.interactions.CrossZoom',

    resetZoom: function () {
        var zoomMap = this.zoomHistory[0],
            axes = this.getChart().getAxes();

        if (zoomMap) {
            for (var i = 0; i < axes.length; i++) {
                var axis = axes[i];
                if (zoomMap[axis.getId()]) {
                    axis.setVisibleRange(zoomMap[axis.getId()]);
                }
            }
        }
        this.getUndoButton().setDisabled(true);
        this.zoomHistory = [];
        this.sync();
    }
});

下面是一个有用的小提琴：https://fiddle.sencha.com/#view/editor&fiddle/264t

另一个编辑

正如@SergeyNovikov在注释中所指出的，正如您从undoZoom方法和resetZoom重写中可以看到的那样，这一切都归结为轴的setVisibleRange方法。因此，您也可以直接使用它与min/max值作为参数来重置缩放。