Fusioncharts:在移动设备上滚动图表区域时出现问题

问题描述

在手机上通过触摸滚动页面时,如果触摸移动图表区域,滚动不起作用。

我知道在图表区域做出的手势会与图表交互。

但我想和其他领域一样。

在我的网站上,屏幕上的图表区域已满,在移动设备上不方便。

我自己使用 x,y 坐标制作了手势,但与浏览器提供的手势相比,这基本上是不稳定的。

如何去除图表区域中的手势?

scrolling on mobile

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 (将#修改为@)

相关问答

依赖报错 idea导入项目后依赖报错,解决方案:https://blog....
错误1:代码生成器依赖和mybatis依赖冲突 启动项目时报错如下...
错误1:gradle项目控制台输出为乱码 # 解决方案:https://bl...
错误还原:在查询的过程中,传入的workType为0时,该条件不起...
报错如下,gcc版本太低 ^ server.c:5346:31: 错误:‘struct...