如何解决Fusioncharts:在移动设备上滚动图表区域时出现问题
在手机上通过触摸滚动页面时,如果触摸移动图表区域,滚动不起作用。
我知道在图表区域做出的手势会与图表交互。
但我想和其他领域一样。
在我的网站上,屏幕上的图表区域已满,在移动设备上不方便。
我自己使用 x,y 坐标制作了手势,但与浏览器提供的手势相比,这基本上是不稳定的。
如何去除图表区域中的手势?
fusioncharts 来源:
FusionCharts.ready(function () {
var revenueChart = new FusionCharts({
type: 'column2d',renderAt: 'chart-container',width: '500',height: '300',dataFormat: 'json',dataSource: {
"chart": {
"caption": "Harry's SuperMart","subCaption": "Monthly revenue for last year","xAxisName": "Month","yAxisName": "Amount","numberPrefix": "$","paletteColors": "#008ee4","bgalpha": "0","borderAlpha": "20","canvasBorderAlpha": "0","usePlotGradientColor": "0","plotBorderAlpha": "10","placevaluesInside": "1","rotatevalues": "1","valueFontColor": "#ffffff","captionpadding": "20","showAxisLines": "1","axisLineAlpha": "25","divLineAlpha": "10","showHoverEffect": "1","plotFillHoverColor": "#008ee4","plotBorderHoverColor": "#008ee4","plotBorderHoverAlpha": "100","plotBorderHoverThickness": "5","animation": "0"
},"data": [{
"label": "Jan","value": "420000"
},{
"label": "Feb","value": "810000"
},{
"label": "Mar","value": "720000"
},{
"label": "Apr","value": "550000"
},{
"label": "May","value": "910000"
},{
"label": "Jun","value": "510000"
},{
"label": "Jul","value": "680000"
},{
"label": "Aug","value": "620000"
},{
"label": "Sep","value": "610000"
},{
"label": "Oct","value": "490000"
},{
"label": "Nov","value": "900000"
},{
"label": "Dec","value": "730000"
}]
}
});
revenueChart.render();
});
var dragFlag = false;
var x,y,pre_x,pre_y;
$(function() {
$("html").bind("touchstart",function(e){
dragFlag = true;
var obj = $("html");
x = obj.scrollLeft();
y = obj.scrollTop();
pre_x = e.originalEvent.touches[0].screenX;
pre_y = e.originalEvent.touches[0].screenY;
});
$("html").bind("touchmove",function(e){
if (dragFlag) {
var obj = $("html");
obj.scrollLeft(x - e.originalEvent.touches[0].screenX + pre_x);
obj.scrollTop(y - e.originalEvent.touches[0].screenY + pre_y);
return false;
}
});
$("html").bind("touchend",function(e){
dragFlag = false;
});
});
fusioncharts jsfiddle:
http://jsfiddle.net/fusioncharts/ppcas1oo/
自定义手势: (与浏览器提供的相比,这很笨拙。)
var dragFlag = false;
var x,function(e){
dragFlag = false;
});
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。