Domanda creare grafici con angularjs [chiuso]


Ho anche esaminato le soluzioni di creazione di grafici che si fondono perfettamente con le direttive Angular.JS. Ne ho incontrati alcuni ma sono diventato davvero confuso. Qualcuno ha qualche suggerimento su come creare grafici interattivi che sono integrati con i moduli Angular.JS?


43
2017-10-17 05:34


origine


risposte:


angolari diagrammi è una libreria che ho scritto per la creazione di grafici con angolare e D3.

Incapsula i grafici di base che possono essere creati usando D3 in una direttiva angolare. Inoltre offre funzionalità come

  1. Cambiamento del grafico con un clic;
  2. Suggerimenti automatici;
  3. Regolazione automatica dei contenitori;
  4. Legends;
  5. Formato dati semplice: definisci solo cosa tu su x e cosa hai bisogno su y;

C'è un demo di grafici angolari a disposizione.


52
2017-12-04 06:25



Ho visto alcune belle soluzioni di grafici di AngularJS che fanno uso di Highcharts. C'è un Highcharts-ng direttiva su GitHub per facilitare l'integrazione con AngularJS, e alcuni  esempi su JSFiddle per darti un rapido assaggio di ciò che è possibile.

Si imposta il grafico sul lato JS in questo modo:

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

E quindi fare riferimento ad esso nel codice HTML come questo:

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

Avviso di utilizzo / licenza: Highcharts è disponibile gratuitamente sotto la licenza Creative Commons per uso non commerciale. Se stai cercando le opzioni di creazione di grafici in uno scenario for-profit / commerciale, dovrai acquistare il prodotto o cercare altrove.


16
2017-10-17 06:17



Il Libreria ZingChart ha un Direttiva AngularJS è stato costruito in casa. Le caratteristiche includono:

  • Accesso completo all'intera libreria ZingChart (tutti i grafici, le mappe e le funzionalità)
  • Sfrutta il legame dati bidirezionale di Angular, rendendo facile l'aggiornamento di dati e elementi grafici
  • Supporto dal team di sviluppo

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

C'è un demo completa con esempi di codice a disposizione.


16
2017-10-15 19:19



Hai provato D3.js? Ecco un bene esempio.


6
2017-10-17 05:48



Ho creato una direttiva angolare per xCharts che è una bella libreria di js chart http://tenxer.github.io/xcharts/. Puoi installarlo usando bower, abbastanza facile: https://github.com/radu-cigmaian/ng-xCharts

Anche Highcharts è una soluzione, ma non è gratuita per l'uso commerciale.


5
2018-03-22 10:02



Per raccogliere più risorse utili qui:

Come accennato prima D3.js è sicuramente la migliore libreria di visualizzazione per i grafici. Per usarlo in AngularJS ho sviluppato angolare-chart. È una direttiva facile da usare che collega D3.js con AngularJS 2-Way-DataBinding. In questo modo il grafico si aggiorna automaticamente ogni volta che si modificano le opzioni di configurazione e allo stesso tempo i grafici salvano il suo stato (livello di zoom, ...) per renderlo disponibile nel mondo di AngularJS.

Guarda il esempi per convincermi.


3
2018-01-18 19:41



Il plugin per grafici di AngularJS insieme alla libreria FusionCharts per aggiungere grafici e grafici JavaScript interattivi alle tue applicazioni web / mobile - con una sola direttiva. link: http://www.fusioncharts.com/angularjs-charts/#/demos/ex1


2
2018-02-03 10:21