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

Question

我正在尝试在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>

它支持click事件，但不支持双向数据绑定。

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

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

它支持双向数据绑定，但是用于单击事件的example_chart的JSON编写的函数不会被解析，因此无法正常工作。

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

Answer 1

<强> highcharts-NG

您可以使用highcharts-ng指令，请参阅此处的用法： Fiddle

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

自定义

请参阅 Fiddle

中的演示

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

我的情况是我在特定字段上使用了几位观察者来提高性能，但您可以在所有config对象上运行深度监视

---

HTML 的

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

JS

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           
       }
   }) ;