charts - smartadmin - ¿Cómo integrar Flot con AngularJS?

template smartadmin

Question

Soy nuevo en Angular y Flot, pero tengo experiencia con Jquery y Javascript. Estoy un poco confundido acerca de cómo enlazar un diagrama flotante con modelos de datos angulares, ya que Flot es un plugin JQuery. He buscado, pero no he podido encontrar un ejemplo.

También me complacería usar Highcharts, Google-charts o cualquier otra solución de gráficos.

Answer 1

Para usar los complementos de jQuery con angularJS, debe envolverlos en directivas; puede encontrar algunos ejemplos de las directivas de complementos de jQuery leyendo el código fuente de las directivas de angularUI: https://github.com/angular-ui/angular-ui/tree / master / modules / directives

Answer 2

Dado que la creación de gráficos implica una gran manipulación DOM, las directivas son el camino a seguir.

Los datos pueden mantenerse en el controlador

App.controller(''Ctrl'', function($scope) {
    $scope.data = [[[0, 1], [1, 5], [2, 2]]];
});

Y puede crear una etiqueta HTML personalizada 1 que especifique el modelo del que desea obtener datos

 <chart ng-model=''data''></chart>

que angular puede compilar a través de una directiva

App.directive(''chart'', function() {
    return {
        restrict: ''E'',
        link: function(scope, elem, attrs) {
            var data = scope[attrs.ngModel];
            $.plot(elem, data, {});
            elem.show();
        }
    };
});

Ejemplo aquí .

Este proceso es similar para la mayoría de los complementos que modifican el DOM.

- * -

Además, puede observar los cambios en los datos subyacentes del gráfico y volver a dibujarlos, de esta forma puede tomar datos del servicio $ http desde su controlador y actualizar la vista automáticamente. Esto se puede lograr modificando la función de vinculación en el objeto de definición de directiva

   var chart = null,
       opts  = { };

    scope.$watch(attrs.ngModel, function(v){
        if(!chart){
            chart = $.plot(elem, v , opts);
            elem.show();
        }else{
            chart.setData(v);
            chart.setupGrid();
            chart.draw();
        }
    });

Observe el uso de la API de Flot dentro de la directiva para lograr lo que queremos.

Aquí el ejemplo completo

1 Puede ser un atributo también.