0

在我的 Web 应用程序中，我使用了这个使用 Highcharts 渲染的漂亮的 3D 散点图。

通过单击并拖动鼠标，它确实可以很好地旋转。

但是，在我的手机和平板电脑上，它也会旋转。

启用旋转的代码如下（取自 Highcharts 示例页面）：

// Add mouse events for rotation
$(chart.container).on('mousedown.hc touchstart.hc', function (eStart) {
    eStart = chart.pointer.normalize(eStart);

    var posX = eStart.pageX,
        posY = eStart.pageY,
        alpha = chart.options.chart.options3d.alpha,
        beta = chart.options.chart.options3d.beta,
        newAlpha,
        newBeta,
        sensitivity = 5; // lower is more sensitive

    $(document).on({
        'mousemove.hc touchdrag.hc': function (e) {
            // Run beta
            newBeta = beta + (posX - e.pageX) / sensitivity;
            chart.options.chart.options3d.beta = newBeta;

            // Run alpha
            newAlpha = alpha + (e.pageY - posY) / sensitivity;
            chart.options.chart.options3d.alpha = newAlpha;

            chart.redraw(false);
        },
        'mouseup touchend': function () {
            $(document).off('.hc');
        }
    });
});

我假设注册此逻辑的事件在我的设备（最近的三星 Galaxy Tab 和三星 Galaxy S5）上不可用。

有任何想法吗？

4

1 回答 1

0

问题是，触摸事件没有pageXor pageY。而不是使用event.pagePosition，你应该使用event.chartPosition。并且chartPositions 仅在标准化后可用chart.pointer.normalize。

另外，没有touchdrag事件，应该是touchmove

于 2017-06-01T05:26:04.180 回答