Question

在我的网络应用程序中，我使用了使用Highcharts渲染的this漂亮的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）上没有注册此逻辑的事件。

有什么想法吗？

Answer 1

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

此外，没有touchdrag事件，它应该是touchmove

在触摸设备上启用Highcharts 3D散点图的旋转

1 个答案: