当绑定到 highcharts/highmaps 指令时，数组设置为 null

Question

我正在使用 highmaps 创建一个矢量图，它可以根据加载到 series[0].data 数组中的数据值而改变。初始图表是使用我的默认值创建的，并使用自定义指令插入到页面中。当 select 下拉菜单更改值时，我使用 ng-change 触发一个函数来更新图表值。

我的 ng-change 函数按预期触发并运行，直到我尝试访问包含用于填充高图的数据的系列。似乎在创建初始图表后，系列数组被赋予了 null 的值。即使我尝试加载新的 chartOptions 对象，这种情况仍然存在。我注意到当包含 chartOptions 的 $scope 对象未绑定到指令时，该系列会填充正确的值。该数组仅在绑定到指令时才为空。

这只发生在我的高图上。页面上的所有其他 highcharts 在双向绑定到指令后都可以看到它们的系列数组以供编辑。也可以查看和编辑我的 highmap chartOptions 对象的所有其他元素，只是没有实际数据的部分。

我的指令

.directive('mapChart', function(){
return {
        restrict: "E",
        replace: true,
        template: "<div id='map' class='div_content-holder'></div>",
        scope:{
            options:"=",
        },
        link: function(scope, element){
                Highcharts.mapChart(element[0], scope.options);
            });
        }
    };
});

我的html

<map-chart options="region_options"></map-chart>

我的JavaScript

$scope.region_options = {};

var setRegionMap = function(jsonData){
        var chartOptions = selectChart('map'); // grabs my premade options object 

        // grabs data from somewhere else and adds it to chart options
        chartOptions.series[0].data.forEach(function (region, index) {
           region["value"] = $scope.region_map.one_month[index];
           console.log(chartOptions.series[0].data); //says that series exists
        });
        $scope.region_options = chartOptions;
        console.log($scope.region_options); //says that .series is null, everything else is still there
        //$scope.$apply(); //i do this elsewhere  in my ajax call
    };

这是数组与高位图或 angular 或两者的双向绑定问题吗？

Answer 1

您可以通过以下方式更改您的指令，为当前数据添加一个新参数。添加这两个手表，您将确保每次从外部更改数据时，图表都会刷新以设置正确的数据，并且在选项上的第一个手表上，您将确保在真正加载选项时实例化图表：

.directive('mapChart', function(){
  return {
    restrict: "E",
    replace: true,        
    template: "<div id='map' class='div_content-holder'></div>",   
    scope:{
      options:"=",
      current: "=" // your actual data        
    },        
    link: function(scope, element){
      var chartexample = {};       
      scope.$watch('options', function() {
        chartexample = Highcharts.mapChart(element[0], scope.options);
      });
      scope.$watch('current', function(){
        chartexample.series[0].setData(scope.current);
      });            
    }
  }
});

你可以摆脱两个观察者。关于 init，您只需要确保在拥有所有选项后就初始化您的指令，这样您就不再需要选项上的手表了。关于当前数据，您可以在指令中添加一个回调参数&，它将更新图表的值，并在关联到select 的ngChange 的函数中调用该指令的回调控制器。

这将使代码更好更清晰。但现在您可以通过这种方式欣赏您的图表 :)

祝您的应用程序好运！

干杯:)

当绑定到 highcharts/highmaps 指令时，数组设置为 null

Array sets to null when bound to highcharts/highmaps directive

javascript

angularjs

arrays

highcharts

highmaps