javascript - To move 3d chart Highcharts via mobile? -
i'm working @ charts: http://www.highcharts.com/demo/3d-scatter-draggable
but have noticed mobile (phone or tablet) impossible move (with thouch) charts.
i have used this:
tooltip: { followtouchmove: true }
maybe impossible phones or iphone (safari) doesn't support option?
the problem normalization, need modify lines, refers pagex/pagey positions.
$(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 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'); } }); });
example: http://jsfiddle.net/l8o0pt6j/7/
Comments
Post a Comment