examples - creando gráficos con angularjs

chart js

Question

También he estado buscando soluciones de gráficos que combinen bien con las directivas Angular.JS. Me encontré con algunos, pero me confundí mucho. ¿Alguien tiene alguna sugerencia sobre cómo crear gráficos interactivos que estén integrados con módulos Angular.JS?

Answer 1

angular-charts es una biblioteca que escribí para crear gráficos con angular y D3 .

Encapsula gráficos básicos que se pueden crear utilizando D3 en una directiva angular. También ofrece características tales como

1. Un cambio en el cuadro de un clic;
2. Información sobre herramientas automáticas;
3. Ajuste automático a los contenedores;
4. Leyendas;
5. Formato de datos simple: solo defina lo que está en x y lo que necesita en y;

Hay una demostración de gráficos angulares disponible.

Answer 2

¿Has probado D3.js? Aquí hay un buen ejemplo .

Answer 3

He visto algunas buenas soluciones de gráficos AngularJS que hacen uso de Highcharts . Hay una directiva highcharts-ng en GitHub para facilitar la integración de AngularJS, y algunos ejemplos en JSFiddle para darle una idea rápida de lo que es posible.

Usted configura el cuadro en el lado JS de esta manera:

$scope.chart = {
    options: {
        chart: {
            type: ''bar''
        }
    },
    series: [{
        data: [10, 15, 12, 8, 7]
    }],
    title: {
        text: ''Hello''
    },
    loading: false
}

Y luego consulte en el HTML de esta manera:

<highchart id="chart1" config="chart"></highchart>

Advertencia de uso / licencia: Highcharts está disponible de forma gratuita bajo la licencia de Creative Commons para uso no comercial. Si está buscando opciones de gráficos en un escenario con fines de lucro / comercial, deberá comprar el producto o buscar en otro lado.

Answer 4

Creé una directiva angular para xCharts, que es una buena biblioteca de gráficos js http://tenxer.github.io/xcharts/ . Puede instalarlo usando bower, bastante fácil: https://github.com/radu-cigmaian/ng-xCharts

Highcharts también es una solución, pero no es gratis para uso comercial.

Answer 5

Para recolectar más recursos útiles aquí:

Como se mencionó antes, D3.js es definitivamente la mejor biblioteca de visualización para gráficos. Para usarlo en AngularJS, desarrollé una gráfica angular . Es una directiva fácil de usar que conecta D3.js con AngularJS 2-Way-DataBinding. De esta forma, la tabla se actualiza automáticamente cada vez que cambia las opciones de configuración y, al mismo tiempo, las tablas guardan su estado (nivel de zoom, ...) para que esté disponible en el mundo de AngularJS.

Mira los ejemplos para convencerte.

Answer 6

La biblioteca ZingChart tiene una directiva AngularJS que se construyó internamente. Las características incluyen:

• Acceso completo a la biblioteca completa de ZingChart (todos los gráficos, mapas y características)
• Aprovecha el enlace de datos bidireccional de Angular, lo que facilita la actualización de datos y elementos de gráfico

• Apoyo del equipo de desarrollo

  ...
  $scope.myJson = {
  type : ''line'',
     series : [
        { values : [54,23,34,23,43] },{ values : [10,15,16,20,40] }
     ]
  };
  ...
  
  <zingchart id="myChart" zc-json="myJson" zc-height=500 zc-width=600></zingchart>

Hay una demostración completa con ejemplos de código disponibles.

Answer 7

El complemento de gráficos AngularJS junto con la biblioteca FusionCharts para agregar gráficos y gráficos de JavaScript interactivos a sus aplicaciones web / móviles, con una sola directiva. Enlace: http://www.fusioncharts.com/angularjs-charts/#/demos/ex1