Question

您好我正在使用angularjs和highcharts在模态窗口中显示图表。它工作正常唯一的问题是它不会清除关于模态关闭的旧图表，这是我的代码

reportModule.directive('hcChart', function () {
   return {
        restrict: 'E',
        template: '<div></div>',
        replace: true,

        link: function (scope, element, attrs) {

            scope.$watch(function () { return attrs.chart; }, function () {

                if (!attrs.chart) return;

                var charts = JSON.parse(attrs.chart);

                $(element[0]).highcharts(charts);

            });
        }
    };
});

和我的数据

$scope.chartOptions = {
            chart: {
                type: 'bar'
            },
            title: {
                text: 'Title'
            },
            xAxis: {
                categories:  ['Africa', 'America', 'Asia', 'Europe', 'Oceania']
            },

            yAxis: {
                min: 0,
                title: {
                    text: yText,
                    align: 'high'
                },
                labels: {
                    overflow: 'justify'
                }
            },
            credits: {
                enabled: false
            },
            series: [{
                name: 'Year 2016',
                data: [107, 31, 635, 203, 2]
            }],
             plotOptions: {
                bar: {
                    dataLabels: {
                        enabled: true
                    }
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                shadow: true
            },
            loading: true
    };

和html

<hc-chart chart='{{ chartOptions }}'>Placeholder for generic chart</hc-chart>

这是我试过的

$('#report').on('hidden.bs.modal', function (e) {
      $timeout(function(){
        $scope.chartOptions=null;
      });
    })

但它不起作用。我只想在模态关闭时清除旧图表值请帮助

Answer 1

请尝试将chartOptions设置为空而不是null。由于您将其设置为null，因此JS上的错误将不再执行。

$('#report').on('hidden.bs.modal', function (e) {
  $timeout(function(){
    $scope.chartOptions={};
  });
})

更新：删除图表并清除内存。在将新图表写入同一容器之前，应调用此方法。它在窗口卸载时被内部调用以防止泄漏。

添加图表元素的ID

<hc-chart id="highChart" chart='{{ chartOptions }}'>Placeholder for generic chart</hc-chart>

更新您的代码

$('#report').on('hidden.bs.modal', function (e) { $timeout(function(){ $('#highChart').highcharts().destroy(); }); })

Answer 2

尝试删除系列：

$scope.chartOptions.series[0].remove(true);

Angularjs highcharts和模态窗口清除了之前的图表

2 个答案: