이온 차트에서 amchart의 시리얼 차트 페이지가 얼어 붙습니다.

Question

이온 차트에서 Amchart's 직렬 차트를 사용하고 있습니다. 나는 그래프 항목의 클릭에 IonicModal을 열고 다른 차트를 만드는 오전

var chart = AmCharts.makeChart("chartdiv", 
        { 
         "type": "serial", 
         "categoryField": "Name", 
         "rotate": true, 
         "angle": 30, 
         "depth3D": 40, 
         "startDuration": 1, 
         "fontSize": 10, 
         "theme": "default", 
         "precision": 4, 
         "creditsPosition": "bottom-right", 
         "responsive": { 
          "enabled": true 
         }, 
         "categoryAxis": { 
          "gridPosition": "middle", 
          "title": "Name", 
          "inside": true 
         }, 
         "graphs": [ 
          { 
           "balloonText": "[[title]] of [[Name]]:[[value]]", 
           "fillAlphas": 1, 
           "id": "AmGraph-1", 
           "title": "X", 
           "type": "column", 
           "valueField": "X" 
          }, 
          { 
           "balloonText": "[[title]] of [[Name]]:[[value]]", 
           "fillAlphas": 1, 
           "id": "AmGraph-2", 
           "title": "Y", 
           "type": "column", 
           "valueField": "Y" 
          }, 
          { 
           "balloonText": "[[title]] of [[Name]]:[[value]]", 
           "fillAlphas": 1, 
           "id": "AmGraph-3", 
           "title": "Z", 
           "type": "column", 
           "valueField": "Z" 
          }        
          ], 
         "valueAxes": [ 
          { 
           "id": "ValueAxis-1", 
           "title": "Amount" 
          } 
         ], 
         "titles": [ 
          { 
           "id": "Title-1", 
           "text": "SUMMARY" 
          } 
         ], 
         "legend": { 
          "enabled": true, 
          "useGraphSettings": true, 
          "position": "bottom" 
         }, 
         "dataProvider": $scope.data, 
         "listeners": [{ 
          "event": "clickGraphItem", 
          "method": function (event) { 
           $scope.SelectedX = event.item.category; 
           $scope.SelectedContext = event.item.dataContext; 
           $scope.LoadDetailsData($scope.SelectedX, $scope.SelectedContext.Period);       
          } 
         }] 

        } 
       ); 
      chart.addListener("dataUpdated", zoomChart); 
      zoomChart(); 

      function zoomChart() { 
       chart.zoomToIndexes(0, chart.dataProvider.length - (chart.dataProvider.length - 3)); 
      } 

를 사용하여 시리얼 차트를 렌더링했다. IonicModal을 닫으면 위의 차트가 포함 된 페이지가 하드웨어 뒤로 버튼을 누를 때까지 고정됩니다.

나는이 사이트에서 몇 군데 파이 차트를 사용하고 있지만이 문제에 직면하고 있지 않습니다. 일련 차트에만 문제가있는 것으로 보입니다. 모달를 엽니 다 템플릿 URL 옵션에서 IonicModal를 사용

-

$ionicModal.fromTemplateUrl('template.html', { scope: $scope }) 
.then(function (modal) { 
    $scope.sortModal = modal; 
}); 

$scope.sortShow = function() { 
    //alert('inside show'); 
    $timeout(function() { 
     $scope.sortModal.show(); 
     $scope.LoadDetailsChart(); //creating next chart data 
    }, 0); 
}; 

$scope.sortClose = function() { 
    $scope.sortModal.hide(); 
}; 

$scope.$on('$destroy', function() { 
    $scope.sortModal.remove(); 
}); 

Answer 1

난 그냥 여기에 거짓으로 paneventenabled 속성을 추가해야합니다. amcharts 설명서에 따라

이 설정은 터치 스크린 장치에만 영향을 미칩니다. 차트가 페이지에 있고 panEventsEnabled가 true로 설정된 경우 사용자가 먼저 차트를 터치하면 페이지가 이동하지 않습니다. 차트의 크기가 커서 터치 장치의 모든 화면을 차지하는 경우 사용자는 페이지를 전혀 이동할 수 없습니다. 그래서 기본값은 "false"입니다. 차트를 선택/이동하거나지도를 이동/집기가 사용자의 주된 목적이라고 생각하면 panEventsEnabled를 true로 설정해야합니다.