通过手机移动3d图表Highcharts？

Question

我正在处理这个图表：http://www.highcharts.com/demo/3d-scatter-draggable

但我注意到，使用移动设备(手机或平板电脑)是不可能移动(思想)排行榜的。

我还使用了这个：

tooltip: {         
    followTouchMove: true
}   

也许在所有手机上都是不可能的，或者我的iPhone (Safari)不支持这个选项？

Answer 1

问题出在规范化上，所以你需要修改引用pageX/pageY位置的行。

$(chart.container).bind('mousedown.hc touchstart.hc', function (e) {
    e = chart.pointer.normalize(e);

    var originalEvent = e.originalEvent || e,
        posX = originalEvent.changedTouches ? originalEvent.changedTouches[0].pageX : e.pageX,
        posY = originalEvent.changedTouches ? originalEvent.changedTouches[0].pageY : e.pageY,
        alpha = chart.options.chart.options3d.alpha,
        beta = chart.options.chart.options3d.beta,
        newAlpha,
        newBeta,
        sensitivity = 5; // lower is more sensitive

    $(document).bind({
        'mousemove.hc touchmove.hc': function (e) {
            // Run beta
            var originalEvent = e.originalEvent || e,
                pageX = originalEvent.changedTouches ? originalEvent.changedTouches[0].pageX : e.pageX,
                pageY = originalEvent.changedTouches ? originalEvent.changedTouches[0].pageY : e.pageY;


            newBeta = beta + (posX - pageX) / sensitivity;
            newBeta = Math.min(100, Math.max(-100, newBeta));
            chart.options.chart.options3d.beta = newBeta;

            // Run alpha
            newAlpha = alpha + (pageY - posY) / sensitivity;
            newAlpha = Math.min(100, Math.max(-100, newAlpha));
            chart.options.chart.options3d.alpha = newAlpha;

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

示例：http://jsfiddle.net/L8o0pt6j/7/