Щелчок события и двухсторонняя привязка данных в HighCharts с помощью AngularJS

Question

Я пытаюсь написать директиву для HighCharts в AngularJS, которая поддерживает двустороннюю привязку данных, а также события кликов по диаграммам.

Директива:

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> 

Он поддерживает два пути связывания данных, но функция написана в формате JSON в example_chart для события нажатия не получить разобран и, следовательно, не функционирует.

Итак, предложите способ обработки обоих футляров в AngularJS way.

Answer 1

Highcharts-нг

Вы можете использовать highcharts-ng директиву См использование здесь: Fiddle

Также вы можете использовать пользовательские директиву:

Выборочная

См демонстрационную в Fiddle

На самом деле здесь нет ничего особенного, довольно простая директива по ограничению выделения с наблюдателем в конфигурации HighChart (определенная как JSON).

I мой случай я использовал несколько наблюдателей на конкретных областях, чтобы улучшить perforamnce но вы можете запустить глубоких часов на всех 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   
     } 
    }) ;