highcharts 开启panning后还是不支持移动端滑动的浏览图表吗?

新手上路,请多包涵

highchartshighstocks开启 panning 后还是不支持移动端滑动浏览并且highstocks的导航条和滚动条在移动端也同样只能识别点击,不能滑动

图片描述

  • 红色框:图表内容;希望能直接来回滑动红框内区域,浏览其余数据.

  • 蓝色框:导航条.

  • 绿色框:滚动条.

html代码:

<div id="container"></div>
<script type="text/javascript" src="/public/javascripts/jquery.min.js" charset="utf-8"></script>
<script src="/public/javascripts/highstock.js"></script>

js代码:

$("#container").highcharts({
    chart: {
        type: 'line',
        style: {
            fontFamily: '微软雅黑'
        },
        panning: true,
        zoomType: null,
        pinchType: null
    },
    loading:{
        hideDuration: 1000,
        showDuration: 1000
    },
    title: {
        text: '当月销售额明细',
        floating: true,
        align: 'left',
        x: 0,
        y: 20,
        style: {
            "fontSize": ".2150rem",
            color: '#1d1d26'
        }
    },
    tooltip: {
        shared: true,
        enabled:false
    },
    rangeSelector : {
        selected : 1
    },
    scrollbar: {
        enabled: true
    },
    navigator : {
        enabled : true
    },
    plotOptions: {
        series: {
            dataLabels: {
                align: 'center',
                enabled: true
            }
        }
    },
    legend: {
        align: 'right',
        verticalAlign: 'top',
        x: 0,
        y: 20
    },
    yAxis: {
        allowDecimals: false,
        title: {
            text: null
        }
    },
    xAxis: {
        type:'linear',
        lables:{
            step:2,
            staggerLines: 1
        },
        allowDecimals: false,
        //                categories: [1, 2, 3, 4, 5, 6, 7],
        crosshair: false,
        max:3
    },
    series: [{
        name: '销售额(万元)',
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6]
    }]
});

示例:http://code.hcharts.cn/line01...
移动端示例:http://code.hcharts.cn/line01...

阅读 7.1k
1 个回答
新手上路,请多包涵

clipboard.png
默认是需要两根手指拖动,设置一根手指的方法followTouchMove:false

我也正在尝试这个方法,还没测试,你可以看看是不是这个问题

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进