angularjs angular-highcharts - Representación de Highcharts utilizando Directivas js angulares





example (4)


app.directive('hcChart', function () {
	return {
			restrict: 'A',
			template: '<div></div>',
			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]
                     }]
                });
			}
	}
			
});
<div id="chart" hc-chart>Placeholder for generic chart</div>
Asegúrese de que Highchart lib se agregue en su index.html

Soy nuevo en Angular JS e intento 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:

<script type="text/javascript">
$(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]
        }]
    });
});


    </script>



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: '<div id="container" style="margin: 0 auto">not working</div>',
    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:

<highchart id="chart1" series="chart.series" title="chart.title" options="chart.options"></highchart>

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.




La directiva Angularjs es un enfoque para hacer elementos personalizados. Puede definir nuevas etiquetas personalizadas con atributos personalizados. Polymer también puede hacer esto, pero lo hará de una manera interesante y más simple. El polímero en realidad no es un marco, es solo una biblioteca. Pero una biblioteca poderosa y sorprendente de la que puedes enamorarte (como yo). Polymer le permitió aprender la tecnología de componentes web nativa hecha por w3c, y los navegadores web lo implementarán. El componente web es la tecnología del futuro, pero Polymer le permite usar esa tecnología ahora mismo. Elementos y aplicaciones con componentes web. Recuerda que dije que el polímero no es un marco y es una biblioteca. Pero cuando estás usando Polímero, en realidad tu marco es DOM. Esta publicación fue sobre js ver 1 angular y polímero y he trabajado. con ambos es mis proyectos y personalmente prefiero el polímero sobre los angulares. Pero la versión Angular 2 es completamente diferente en comparación con angularjs ver 1.directive en angular 2 tiene un significado diferente.





angularjs highcharts