首页 > 解决方案 > 在移动设备上拖动图表时,Angular highcharts 滚动不起作用

问题描述

我在我的 Angular 8 项目中使用基本线 Highcharts。当我尝试在 iPhone 上使用该系统时,我无法将页面滚动到图表所在的区域。图表阻止页面滚动工作。例如,当图表覆盖整个屏幕时,这非常烦人,因为在这种情况下无法滚动页面。

我正在添加我的 TS 函数的代码

chartOptions = {

        title: {
            text: 'Your Net Worth'
        },
        yAxis: {
            title: {
                text: 'Money in GBP'
            }
        },
        legend: {
            align: 'center',
            verticalAlign: 'bottom',
            x: 0,
            y: 0
        },
        credits: {
            enabled: false,
        },
        plotOptions: {
            series: {
                label: {
                    connectorAllowed: false
                },
                pointStart: 2020
            }
        },
    
        series: [
            {
                name: 'Net Worth',
                color: '#00b300',
                data: [latest_networth_for_chart]
            }
            , {
                name: 'Age group (domestic) (coming soon)',
                color: '#ff0000',
                data: [0, 0, 0, 0, 0, 0, 0, 0],
                visible: false
            }, {
                name: 'Age group (expats) (coming soon)',
                color: '#0000b3',
                data: [0, 0, 0, 0, 0, 0, 0, 0],
                visible: false
            },
            {
                name: 'Others in your industry (coming soon)',
                color: '#0000b3',
                data: [0, 0, 0, 0, 0, 0, 0, 0],
                visible: false
            },
            {
                name: 'Peer group (coming soon)',
                color: '#0000b3',
                data: [0, 0, 0, 0, 0, 0, 0, 0],
                visible: false
            },
            {
                name: 'Global average (coming soon)',
                color: '#0000b3',
                data: [0, 0, 0, 0, 0, 0, 0, 0],
                visible: false
            },
            {
                name: 'This time last year (coming soon)',
                color: '#0000b3',
                data: [0, 0, 0, 0, 0, 0, 0, 0],
                visible: false
            },
        ],
    
        responsive: {
            rules: [{
                condition: {
                    maxWidth: 540
                },
                chartOptions: {
                    legend: {
                        layout: 'horizontal',
                        align: 'center',
                        verticalAlign: 'bottom',
                        enabled: false
                    }
                }
            }]
        }
    }
  }

我对我的代码做了什么错误的事情吗?问候,法兹。

标签: htmlangulartypescripthighchartsangular8

解决方案


推荐阅读