Graphique boursier dans ExtJS 4

Question

Comment puis-je dessiner un graphique boursier ou un graphique linéaire avec des centaines de points? J'ai désactivé l'animation dans un graphique à ligne régulière, mais pas réussi et encore trop lourd et lent.

Answer 1

J'ai récemment écrit un article sur la création de graphiques boursiers dans Ext JS 4 - http://www.scottlogic.co.uk/2011/12/ext-js-4-stock-charts/. Il utilise quelques centaines de points et fonctionne bien dans les navigateurs modernes et n'est pas trop mal dans IE7-8. Cela dit, même après avoir joué avec le système de construction Ext JS, la construction Ext minimale requise pour exécuter les diagrammes est toujours quelque chose comme .5 Mo qui est trop lourd pour certaines applications. Le CSS peut cependant être réduit à quelques règles - si vous êtes prêt à passer du temps à essayer de trouver ceux dont vous avez besoin de l'énorme ext-all.css!

Answer 2

Si vous générez dynamiquement du code extjs (php, python, asp.net ...) et que la source de données est statique, vous pouvez facilement générer un graphique en png et le charger sur ext.panel.

Answer 3

J'ai trouvé flot (http://code.google.com/p/flot/) pour avoir de meilleures performances avec de nombreux points/séries, alors que les performances des cartes ExtJS 4 étaient inacceptables. Flot a également une API plus claire et lit les données dans un format simple.

Answer 4

Mon application est entièrement basée sur Ext-JS. Cependant, lorsque la performance est un problème, j'utilise flot. L'API est beaucoup mieux conçue (et je suis fan de Ext-JS) et elle fonctionne beaucoup mieux. Ceci est au détriment de travailler avec des données de pixels bruts (canevas, qui est basé sur des pixels) si vous avez besoin d'interagir avec le graphique. Comme dans Ext-JS, tout est un objet SVG, vous pouvez simplement attacher des gestionnaires d'événements aux lignes, ou à tout ce que vous dessinez vous-même.

Par exemple. Pour un moniteur d'onde, nous utilisons le flot. Pour un autre graphique où nous laissons l'utilisateur glisser et déposer des lignes sur l'écran, nous utilisons des graphiques Ext-JS.

Voici un emballage simpliste d'utiliser Flot comme Ext.Component

Ext.define('cci.view.wavemon.Flot', { 
    extend: 'Ext.Component', 
    alias: 'widget.cci-flot', 

    /** 
    * @cfg {number[][]} data The data to be drawn when it gets rendered 
    */ 
    data: null, 

    /** 
    * @cfg {object} flotOptions 
    * The options to be passed in to $.plot 
    */ 
    flotOptions: null, 

    /** 
    * @property 
    * The Flot object used to render the chart and to manipulate it in the future. It will only 
    * be available after the first resize event 
    * You may not set this property but you are free to call methods on it 
    */ 
    flot: null, 

    initComponent: function() { 
     this.callParent(arguments); 
     // The only time that we're guaranteed to have dimensions is after the first resize event 
     this.on('resize', function(comp) { 
      if (!this.flot) { 
       this.flot = $.plot(this.getTargetEl().dom, this.data, this.flotOptions); 
      } else { 
       // Flot knows to look at the containers size and resize itself 
       this.flot.resize(); 
      } 
     }, this); 
    } 
}); 

Answer 5

Il y a un exemple complet sur la façon de créer des graphiques de ligne de stock pour les cartes Sencha ici:

http://dev.sencha.com/deploy/touch-charts-1.0.0/examples/Stock/

Comme vous peut voir, l'exemple gère plus de 100 points de données facilement.

L'exemple est pour les graphiques tactiles, mais l'API est presque identique à ce qui est dans ExtJS 4 de Sencha. Copier et coller le code d'instanciation de diagramme devrait faire le travail.