Question

我有一个带有交叉的sencha图表和像小提琴中的那个一样的innerPadding。我遇到的问题是，无法将交叉缩放的矩形完全拉到x轴和图表的右侧。当我删除图表的innerPadding时，一切正常。

https://fiddle.sencha.com/#fiddle/mh8

此问题是否有解决方法？

Answer 1

我已经解决了你的小提问，在这里：https://fiddle.sencha.com/#fiddle/mih

注意：你的问题用Touch2.1标记，但你的小提琴是在2.4.1

定义innerPadding时，图表的innerRegion将根据您的填充计算。摘录自source of CartesianChart

shrinkBox.left += innerPadding.left;
            shrinkBox.top += innerPadding.top;
            shrinkBox.right += innerPadding.right;
            shrinkBox.bottom += innerPadding.bottom;

            innerWidth = width - innerPadding.left - innerPadding.right;
            innerHeight = height - innerPadding.top - innerPadding.bottom;

            me.setInnerRegion([shrinkBox.left, shrinkBox.top, innerWidth, innerHeight]);

现在在CrossZoom的onGesture（受保护函数）处理程序中，它实际上会检查图表的innerRegion，以及当前的x或y是否大于宽度或高度（从内部区域获取此值）图表分别为图表，它重置为图表的宽度/高度（宽度和高度为）。因此，您在填充区域内受限。

此问题是否有解决方法？

您可以通过覆盖此行为来解决此问题，但就Sencha而言，这是预期的行为。

覆盖CrossZoom的onGesture功能，以便考虑填充偏移量。

//在CrossZoom中实现onGesture

    onGesture: function (e) {
    var me = this;
    if (me.zoomAnimationInProgress) {
        return;
    }
    if (me.getLocks()[me.getGesture()] === me) {
        var chart = me.getChart(),
            surface = me.getSurface(),
            region = chart.getInnerRegion(),
            chartWidth = region[2],
            chartHeight = region[3],
            xy = chart.element.getXY(),
            x = e.pageX - xy[0] - region[0],
            y = e.pageY - xy[1] - region[1];

        if (x < 0) {
            x = 0;
        } else if (x > chartWidth) {
            x = chartWidth; // this is where it limits you in the x-axis
        }
        if (y < 0) {
            y = 0;
        } else if (y > chartHeight) {
            y = chartHeight; // this is where it limits you in the y-axis
        }
        me.selectionRect.setAttributes({
            width: x - me.startX,
            height: y - me.startY
        });
        if (Math.abs(me.startX - x) < 11 || Math.abs(me.startY - y) < 11) {
            me.selectionRect.setAttributes({globalAlpha: 0.5});
        } else {
            me.selectionRect.setAttributes({globalAlpha: 1});
        }
        surface.renderFrame();
        return false;
    }
}

请参阅source code了解更多详情和理解。

仅供参考：您可能会再次遇到无法在填充区域外绘制CrossZoom叠加层的问题。如果您问这个问题，请查看onGestureStart。

带有内部填充的sencha图表中的Crosszoom

1 个答案: