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

【问题标题】：Enable rotation of Highcharts 3D scatter chart on touch devices在触控设备上启用 Highcharts 3D 散点图的旋转
【发布时间】：2017-02-09 12:40:11
【问题描述】：

在我的 Web 应用程序中，我使用了 this 使用 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）上不可用。

有什么想法吗？

【问题讨论】：

标签： highcharts scatter3d

【解决方案1】：

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

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

【讨论】：