Question

在这个小提琴中，当我放大图表一点后，单击“平移”按钮。我可以拖动图表以查看其他值。

我想要的是：-

页面加载后，我应该能够左右左右拖动图表。因此，我们需要预先设置缩放比例或启用平移功能吗？我们该怎么做？

请帮助！

谢谢

Answer 1

渲染图表后，使用 PanZoom 交互中的功能 transformAxesBy ：

listeners: {
    afterrender: function () {
        var axes = chart.getAxes();

        //Change the zoom value to fit your needs
        //function usage transformAxesBy(axes, panX, panY, zoomX, zoomY)
        chart.getInteractions()[0].transformAxesBy(axes, 0, 0, 1.5, 0);
    }
}

我修改了您的小提琴代码：

Ext.application({
    name: 'Fiddle',

    launch: function () {
        var chart;
        new LabChart({
            renderTo: document.body,
            width: 500,
            height: 220,
            margin: 30
        });
    }
});

Ext.define('LabChart', {
    extend: 'Ext.Panel',
    xtype: 'labchart',

    layout: 'fit',

    initComponent: function () {
        var me = this;

        me.myDataStore = Ext.create('Ext.data.JsonStore', {
            fields: ['time', 'data1'],
            data: [{
                "time": '2014',
                "data1": 15
            }, {
                "time": '2015',
                "data1": 20
            }, {
                "time": '2016',
                "data1": 25
            }, {
                "time": '2017',
                "data1": 20
            }]
        });
        me.items = [{
            xtype: 'cartesian',
            insetPadding: 10,
            interactions: [{
                type: 'panzoom',
                zoomOnPan: true,

                axes: {
                    left: {
                        allowPan: false,
                        allowZoom: true
                    },
                    bottom: {}
                }
            }],
            store: me.myDataStore,
            axes: [{
                type: 'numeric',
                fields: 'data1',
                position: 'left',
                minimum: 0,
                maximum: 30,
                dashSize: 0,
            }, {
                type: 'numeric',
                fields: ['time'],
                minimum: 2000,
                maximum: 2019,
                grid: true
            }],
            series: [{
                type: 'line',
                xField: 'time',
                yField: 'data1',
                label: {
                    field: 'data1'
                }
            }],
            listeners: {
                afterrender: function () {
                    var axes = chart.getAxes();
                    chart.getInteractions()[0].transformAxesBy(axes, 0, 0, 1.5, 0);
                }
            }
        }];

        function resetChart() {
            var axes = chart.getAxes();

            axes[0].setVisibleRange([0, 1]);
            axes[1].setVisibleRange([0, 1]);
            chart.redraw();
        }
        me.tbar = [{
            text: 'Reset pan/zoom',
            handler: resetChart
        }];
        me.callParent();

        chart = this.down('cartesian'),
            panzoom = chart.getInteractions()[0];
        this.down('toolbar').add(panzoom.getModeToggleButton());
    }
});

ExtJS：使拖动/平移无需缩放即可工作

1 个答案: