web-dev-qa-db-fra.com

créer des graphiques avec angularjs

J'ai également cherché des solutions de cartographie qui se marieraient bien avec les directives Angular.JS. Je suis tombé sur quelques-uns mais je suis devenu vraiment confus. Quelqu'un a-t-il des suggestions sur la création de graphiques interactifs intégrés aux modules Angular.JS?

angularjscharts
43
Hmahwish

angular-charts est une bibliothèque que j'ai écrite pour créer des graphiques avec angular et D .

Il encapsule les graphiques de base qui peuvent être créés avec D3 dans une directive angular. Il offre également des fonctionnalités telles que

  1. Changement de graphique en un clic;
  2. Infobulles automatiques;
  3. Ajustement automatique des conteneurs;
  4. Légendes;
  5. Format de données simple: définissez uniquement ce que vous utilisez x et ce dont vous avez besoin sur y;

Il y a un démo de cartes angulaires disponible.

52
Chinmay Kulkarni

J'ai vu des solutions de cartographie Nice AngularJS qui utilisent Highcharts . Il existe une directive highcharts-ng sur GitHub pour faciliter l'intégration d'AngularJS, et certainsexemples sur JSFiddle pour vous donner un aperçu rapide de ce qui est possible.

Vous configurez le graphique du côté JS comme suit:

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

Et puis se référer à cela dans le code HTML comme ceci:

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

Avertissement concernant l'utilisation/les licences: Highcharts est disponible gratuitement sous licence Creative Commons pour une utilisation non commerciale. Si vous recherchez des options de cartographie dans un scénario commercial/à but lucratif, vous devrez acheter le produit ou regarder ailleurs.

16
ajk

La bibliothèque ZingChart a une directive AngularJS qui a été construite en interne. Les fonctionnalités incluent:

  • Accès complet à la bibliothèque ZingChart complète (tous les graphiques, cartes et fonctionnalités)
  • Tirez parti de la liaison de données bidirectionnelle d'Angular, ce qui facilite la mise à jour des éléments de données et de graphiques.

  • Support de l'équipe de développement

    ...
$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>

Il y a un démo complète avec des exemples de code disponible.

16
RockinSocks

Avez-vous essayé D3.js? Voici un bon exemple .

6
D.S

J'ai créé une directive angular pour xCharts, qui est une bibliothèque de graphiques Nice js http://tenxer.github.io/xcharts/ . Vous pouvez l'installer à l'aide de bower, assez facile: https://github.com/radu-cigmaian/ng-xCharts

Highcharts est également une solution, mais elle n’est pas gratuite pour une utilisation commerciale.

5
radu.cigmaian

Pour collecter plus de ressources utiles ici:

Comme mentionné précédemment, D3.js est certainement la meilleure bibliothèque de visualisation pour les graphiques. Pour l'utiliser dans AngularJS, j'ai développé diagramme angulaire . C'est une directive facile à utiliser qui connecte D3.js au AngularJS 2-Way-DataBinding. Ainsi, la carte est automatiquement mise à jour lorsque vous modifiez les options de configuration et en même temps, la carte enregistre son état (niveau de zoom, ...) pour la rendre disponible dans le monde AngularJS.

Découvrez le exemples pour vous en convaincre.

3
Max Klenk

Le plugin de création de graphiques AngularJS ainsi que la bibliothèque FusionCharts permettent d’ajouter des graphiques et graphiques JavaScript interactifs à vos applications Web/mobiles - avec une seule directive. Lien: http://www.fusioncharts.com/angularjs-charts/#/demos/ex1

2
Vishalika