javascript - 绑定(bind)到 highcharts/highmaps 指令时数组设置为 null

Question

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

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

这只发生在我的高 map 上。页面上的所有其他 Highcharts 在双向绑定(bind)到指令后都可以看到其系列数组以供编辑。此外，我的 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
    };

这是将数组与 Highcharts 或 Angular 或两者双向绑定(bind)的问题吗？

Answer 1

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

.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 关联的函数内调用该指令的回调 Controller 。

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

祝您的应用好运!

干杯:)