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

Array sets to null when bound to highcharts/highmaps directive

我正在使用 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 或两者的双向绑定问题吗?

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

.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 的函数中调用该指令的回调控制器。

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

祝您的应用程序好运!

干杯:)