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

发布于 2022-09-03 18:56:40 字数 2402 浏览 16 评论 0

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...

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

So要识趣 2022-09-10 18:56:40

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

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文