使用 AngularJS 在 HighCharts 中单击事件和双向数据绑定答案

【问题标题】：Click event and two way data binding in HighCharts using AngularJS使用 AngularJS 在 HighCharts 中单击事件和双向数据绑定
【发布时间】：2014-12-12 17:15:31
【问题描述】：

我正在尝试在 AngularJS 中为 HighCharts 编写一个指令，它支持两种方式的数据绑定以及图表上的点击事件。

指令：

app.directive('highchart', function () {
    return {
        restrict: 'E',
        template: '<div></div>',
        replace: true,
        link: function (scope, element, attrs) {
             scope.$watch(scope.example_chart, function() {
             var chart = JSON.parse(attrs.chart)
             element.highcharts(chart);
             }
        }
    }
});

现在，当我这样编写 HTML 时：

<div>            
     <highchart chart='example_chart'></highchart>
</div>

支持点击事件，但不支持双向数据绑定。

并且，当它作为表达式传递时：

<div>            
     <highchart chart='{{example_chart}}'></highchart>
</div>

它支持两种方式的数据绑定，但用 example_chart 的 JSON 编写的用于点击事件的函数没有被解析，因此无法运行。

所以，建议一种以 AngularJS 方式处理这两种情况的方法。

【问题讨论】：

标签： angularjs highcharts mouseclick-event 2-way-object-databinding

【解决方案1】：

highcharts-ng

您可以使用highcharts-ng 指令，在此处查看用法：Fiddle

你也可以使用自定义指令：

自定义

在 Fiddle

中查看演示

实际上这里没有什么特别的，非常简单的隔离范围指令，在 highChart 配置（定义为 JSON）上带有观察者。

在我的情况下，我在特定领域使用了几个观察者来提高性能，但您可以在所有 config 对象上运行 deep 观察

HTML

<high-chart config="chartConfig"> </high-chart>

myapp.directive('highChart',
   function () {
       return {
           restrict: 'E',
           replace:true,
            scope: {
            config: '='  
           },
           template: '<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>',
           link: function (scope, element, attrs) {

                var chart = false;

                var initChart = function() {
                  if (chart) chart.destroy();
                  var config = scope.config || {};
                  //var mergedOptions = getMergedOptions(scope, element, config);
                  chart = new Highcharts.Chart(config);

                  if(config.loading) {
                    chart.showLoading();
                  }

                };
                initChart();


       scope.$watch('config.loadRandomData', function (value) {
           if(value == false){return;}

           chart.series[0].setData(scope.config.series[0].data);          

           scope.config.loadRandomData = false;
        }, true);


        scope.$watch('config.loading', function (loading) {
          if(loading) {
            chart.showLoading();
          } else {
            chart.hideLoading();
          }
        });

       scope.$watch('config.series[0].type', function (type) {

         chart.series[0].update({type: type});        
        });

        scope.$watch('config.series[0].dataLabels.enabled', function (enableDataLabels) {          
         chart.series[0].update({dataLabels: {enabled: enableDataLabels}});        
        });                
         }//end watch           
       }
   }) ;

【讨论】：