微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决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 举报,一经查实,本站将立刻删除。