Question

我在离子框架中使用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时，包含上面图表的页面会被冻结，直到我按下硬件后退按钮。

我使用的饼图很少，但在这些页面上没有遇到这个问题。似乎串行图只存在一些问题。

使用模板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属性添加为false。根据amcharts docs，

此设置仅影响触摸屏设备。如果图表在页面上，并且panEventsEnabled设置为true，则如果用户首先触摸图表，页面将不会移动。如果图表足够大并且占据了触摸设备的所有屏幕，则用户将根本无法移动页面。这就是默认值为＆＃34; false＆＃34;的原因。如果您认为选择/平移图表或移动/捏合地图是用户的主要目的，则应将panEventsEnabled设置为true。

当在Ionic中使用时，Amchart的Serial Chart页面会被冻结

1 个答案: