ExtJS 6 以编程方式重置图表缩放

Question

如何以编程方式重置简单折线图的缩放（显示整个图形）？我在文档中找不到合适的方法。

我用的是它的Ext.chart.interactions.CrossZoom。

Answer 1

CrossZoom class 中有一个未记录的 undoZoom 方法。你可以像这样使用它：

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

编辑

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

基于 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();
    }
});

这是一个有效的 fiddle：https://fiddle.sencha.com/#view/editor&fiddle/264t

另一个编辑

作为@SergeyNovikov has noted in the comments, and as you can see from the undoZoom method and resetZoom override, it all comes down to the axis' setVisibleRange方法。所以你也可以直接使用它以 min/max 值作为参数来重置缩放。

ExtJS 6 以编程方式重置图表缩放

ExtJS 6 Reset chart zoom programatically

extjs

extjs6