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

Question

我有一个带有交叉缩放和 innerPadding 的煎茶图表，就像 fiddle 中的图表一样。我遇到的问题是无法将十字缩放的矩形完全向下拉到 x 轴和图表的右侧。当我删除图表的 innerPadding 时，一切正常。

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

这个问题有解决方法吗？

Answer 1

我已经为你的 fiddle 分叉了一个修复程序，在这里：https://fiddle.sencha.com/#fiddle/mih

注意：您的问题已标记为 Touch2.1，但您的 fiddle 在 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 是否大于宽度或高度（您可以从 innerRegion图表的）分别重置为图表的 width/height（宽度和高度为）。因此，您被限制在填充区域内。

Is there a workaround for this problem?

您可以通过覆盖此行为来解决此问题，但就 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

Crosszoom in a sencha chart with inner padding

extjs

sencha-touch-2

sencha-touch-2.1