我正在使用股票类型的AmCharts来显示图形。问题在于,在移动设备上,它消耗触摸并且无法滚动。我已经设置了"panEventsEnabled": false。但是它仍然消耗触摸,并且在桌面浏览器上我仍然可以平移图表。我不明白为什么它没有禁用panEvent。

下面是我的图表对象。最后设置panEventsEnabled=false

var chartObject = {
"type": "stock",
    "theme": "light",
    "categoryAxesSettings": {
      "minPeriod": "mm",
      "maxSeries": 250,
      "groupToPeriods": [ "mm", "10mm", "30mm", "hh", "3hh", "DD", "3DD", "WW", "MM", "YYYY"]
    },
    "dataSets": [ {
      "color": "#00e673",
      "fieldMappings": [ {
        "fromField": "close",
        "toField": "value"
      }, {
        "fromField": "volumeto",
        "toField": "volume"
      } ],
      "categoryField": "time"
    }],
    "balloon": {},
    "panels": [ {
      "showCategoryAxis": true,
      "categoryBalloonEnabled": false,
      "recalculateToPercents": "never",
      "title": "Value",
      "percentHeight": 60,

      "stockGraphs": [ {
        "id": "g1",
        "title": Value,
        "precision": 2,
        "valueField": "value",
        "type": "line",
        "compareable": true,
        "lineThickness": 2,
        "balloonText": "close: [[value]]",
        "fillAlphas": 0.6
      } ],


      "stockLegend": {
        "valueTextRegular": ": [[value]]"
      }
    }, {
      "title": "Volume",
      "percentHeight": 30,
      "stockGraphs": [ {
        "precision": 2,
        "valueField": "volume",
        "type": "column",
        "cornerRadiusTop": 2,
        "fillAlphas": 1
      } ],

      "stockLegend": {
        "valueTextRegular": "Volume: [[value]]"
      }
    } ],

    "chartScrollbarSettings": {
      "graph": "g1",
      "usePeriod": "10mm",
      "position": "bottom"
    },

    "chartCursorSettings": {
      "valueBalloonsEnabled": true,
      "fullWidth": true,
      "cursorColor": "#ff0000",
      "cursorAlpha": 0.1,
      "valueLineBalloonEnabled": true,
      "valueLineEnabled": true,
      "valueLineAlpha": 0.5
    },

    "periodSelector": {
      "position": "top",
      "dateFormat": "YYYY-MM-DD JJ:NN",
      //"periodContainer":{},
      "hideOutOfScopePeriods":false,
      "inputFieldsEnabled": false,
      "inputFieldWidth": 100,
      "periods": [ {
        "period": "mm", //histomin limit 60
        "count": 60,
        "minPeriod": "mm",
        "label": "1H"
      }, {
        "period": "mm",//histomin limit 1440 //autogroup
        "minPeriod": "mm",
        "count": 1440,
        "label": "1D"
      },{
        "period": "DD",//histohour limit 168
        "count": 7,
        "label": "1W"
      }, {
        "period": "MM",//histohour limit 744
        "count": 1,
        "label": "1M"
      }, {
        "period": "MM",//histoday limit 93
        "count": 3,
        "label": "3M"
      },{
        "period": "YYYY",//histoday limit 365
        "count": 1,
        "label": "1Y"
      }, {
        "period": "MAX",//histoday all
        "label": "MAX"
      } ]
    },

    "panelsSettings": {
      "usePrefixes": false,
      "creditsPosition":"bottom-left",
      "panEventsEnabled": false
    },
   };

最佳答案

请使用responsive插件并覆盖selectWithoutZooming

"responsive": {
    "enabled": true,
    "rules": [{
        "maxWidth": 800,
        "overrides": {
            "chartCursorSettings": {
                "selectWithoutZooming": true
            }
        }
    }]
}


在此处查看示例:https://codepen.io/team/amcharts/pen/80a7ccf3fb8d2c04d00ef9121ca0806c?editors=1010

07-26 09:32