Representación de Highcharts utilizando Directivas js angulares

Soy nuevo en Angular JS e bash renderizar mis Highcharts (Basic Line) creando una directiva. Por favor dígame el enfoque que debería seguir aquí. Cualquier ayuda sería apreciada.

Aquí está mi script para los Highcharts:

 $(function () { $('#container').highcharts({ chart: { type: 'line', marginRight: 130, marginBottom: 25 }, title: { text: 'Monthly Average Temperature', x: -20 //center }, subtitle: { text: 'Source: WorldClimate.com', x: -20 }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, yAxis: { title: { text: 'Temperature (°C)' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, tooltip: { valueSuffix: '°C' }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'top', x: -10, y: 100, borderWidth: 0 }, series: [{ name: 'Tokyo', data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] }, { name: 'New York', data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5] }, { name: 'Berlin', data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0] }, { name: 'London', data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8] }] }); });  

Ejemplo de gráfico circular:

http://jsfiddle.net/csTzc/

  function MyCtrl($scope, limitToFilter) { $scope.ideas = [ ['ideas1', 1], ['ideas2', 8], ['ideas3', 5] ]; $scope.limitedIdeas = limitToFilter($scope.ideas, 2); } angular.module('myApp', []) .directive('hcPie', function () { return { restrict: 'C', replace: true, scope: { items: '=' }, controller: function ($scope, $element, $attrs) { console.log(2); }, template: '
not working
', link: function (scope, element, attrs) { console.log(3); var chart = new Highcharts.Chart(options); scope.$watch("items", function (newValue) { chart.series[0].setData(newValue, true); }, true); } } });

Implementación alternativa aquí: http://jsfiddle.net/pablojim/Cp73s/

Esto usa https://github.com/pablojim/highcharts-ng

Esto le permite crear un Highchart con el siguiente html:

  

En el caso anterior, chart.series es una matriz de objetos javascript que representa las series en el gráfico; estos toman las opciones estándar de Highcharts. Estos son luego observados por angularjs para cualquier cambio.

chart.options es las opciones de inicialización de Highcharts, también observadas en busca de cambios. Aunque los cambios en esto recrean toda la tabla.

chart.title es el objeto de título de los Highcharts, también se han observado los cambios.

 app.directive('hcChart', function () { return { restrict: 'A', template: '
', scope: { options: '=' }, link: function (scope , element, attribute) { Highcharts.chart('chart', { chartOptions: { type: 'line' }, title: { text: 'Temperature data' }, series: [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }] }); } } });
 
Placeholder for generic chart