在 Ionic 中使用时，Amcharts Serial Chart 页面被冻结

Question

我在 ionic 框架中使用 Amchart's 系列图表。我使用

渲染了序列图

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 并创建另一个图表。当我关闭 IonicModal 时，包含上述图表的页面会冻结，直到我按下硬件后退按钮。

我在少数地方使用饼图，但在这些页面上没有遇到这个问题。似乎只有序列图有问题。

使用模板中的 IonicModal URL 选项打开模式 -

$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 属性添加为 false。根据 amcharts 文档，

This setting affects touch-screen devices only. If a chart is on a page, and panEventsEnabled are set to true, the page won't move if the user touches the chart first. If a chart is big enough and occupies all the screen of your touch device, the user won’t be able to move the page at all. That's why the default value is "false". If you think that selecting/panning the chart or moving/pinching the map is a primary purpose of your users, you should set panEventsEnabled to true.

在 Ionic 中使用时，Amcharts Serial Chart 页面被冻结

Amchart's Serial Chart page gets freezed when used in Ionic

amcharts

angularjs

ionic-framework