Sencha Touch und Charts

Question

Hat jemand schon Charts und Grafiken in Sencha Touch integriert?

Wenn ja, würde ein Beispiel geschätzt werden.

Dank

Answer 1

Ich habe den Eindruck, dass Raphael (http://raphaeljs.com/) würde schließlich in Sencha Touch für seine Grafik-Komponente (http://g.raphaeljs.com/) eingebaut werden. Bis dahin können Sie ziemlich einfach die zusätzlichen Raphael .js-Dateien hinzufügen und so Grafiken erstellen. Etwas wie:

<script src="sencha-touch-1.0/sencha-touch-debug.js" type="text/javascript" charset="utf-8"></script> 

<!-- Raphael JS --> 
<script src="raphael/raphael-min.js" type="text/javascript" charset="utf-8"></script> 
<script src="raphael/g.raphael-min.js" type="text/javascript" charset="utf-8"></script> 
<script src="raphael/g.pie-min.js" type="text/javascript" charset="utf-8"></script> 
<script src="raphael/g.line-min.js" type="text/javascript" charset="utf-8"></script> 
<script src="raphael/g.bar-min.js" type="text/javascript" charset="utf-8"></script> 

<script type="text/javascript" charset="utf-8"> 
    Ext.setup({ 
     onReady: function() 
     { 
      // Set up main panel! 
      var tabPanel = new Ext.Panel 
      ({ 
       fullscreen: true, 
       html: '<div id="graph"></div>' 
      }); 

      // Try to draw a graph! 
      var r = Raphael('graph'); 
      r.g.txtattr.font = '12px Helvetica, Arial, sans-serif'; 
      r.g.text(150, 250, "Demo chart with title"); 
      r.g.linechart(10, 10, 300, 220, [[1, 2, 3, 4, 5, 6, 7],[3.5, 4.5, 5.5, 6.5, 7, 8]], [[12, 32, 23, 15, 17, 27, 22], [10, 20, 30, 25, 15, 28]], {nostroke: false, axis: "0 0 1 1", symbol: "o", smooth: true}); 

     } 
    }); 
</script> 

Answer 2

Werfen Sie einen Blick auf http://code.google.com/p/oppo-touching/. Jemand hat sich bereits zu Snecha Touch bewegt. Außerdem gibt es Neuigkeiten, dass die nächste Version von Sencha Touch Charting enthalten wird.

Answer 3

Sencha Touch Charts wurde gerade released

Answer 4

sie nun einige Beispiele haben. sie sollten http://dev.sencha.com/deploy/touch-charts-beta/examples/

Answer 5

Hier ist der Code für ein Beispieldiagramm in Sencha Touch

var SampleLineChart = new Ext.chart.Chart({ 
    fullscreen : true, 
    iconCls: 'line', 
    cls: 'chartpanel', 
    theme: 'Energy', 
    interactions: [ 'reset', 
    { 
     type: 'panzoom', 
     axes: { 
      right: {} 
     } 
    }, 
    { 
     type: 'iteminfo', 
     gesture: 'tap', 
     listeners: { 
      show: function(interaction, item, panel) { 

//     Ext.dispatch({ 
//      controller : 'Users', 
//      action : 'popupInfoAbtChart', 
//      data : {item:item, panel:panel} 
//     }); 

      } 
     } 
    }], 
    animate: false, 
    store: EnergyApp.stores.ChartStore, //choose for consumption 
    axes: [{ 
     type: 'Numeric', 
     position: 'right', 
     minimum: 0, 
     majorTickSteps : 10, 
     minorTickSteps : 5, 
     fields: ['generatedpv', 'buildcons','excessPV'], 
     title: 'Y-axis title' 
    }, 
    { 
     type: 'Category', 
     position: 'bottom', 
     fields: ['day'], 
     title: 'X-axis title', 
     label: { 
      rotate: { 
       degrees: 45 
      } 
     } 
    }], 
    legend: { 
     position: Ext.is.Phone ? 'left' : 'top' 
    }, 

    series: [{ 
     type: 'line', 
     highlight: false, 
     showMarkers: true, 
     fill: false, 
     smooth: true, 
     axis: 'right', 
     xField: 'day', 
     yField: 'generatedpv', 
     title: 'Field 1 
    }, 
{ 
     type: 'line', 
     highlight: false, 
     showMarkers: true, 
     fill: false, 
     smooth: true, 
     axis: 'right', 
     xField: 'day', 
     yField: 'buildcons', 
     title: 'Field 2 
    }], 

    listeners: { 
     afterrender: function(me) { 
      me.on('beforerefresh', function() { 
       if (me.ownerCt.getActiveItem().id !== me.id) { 
        return false; 
       } 
      }, me); 
     } 
    } 
}); 

Hilfe Weitere Codebeispiele einen Blick auf dem EnergyApp Beispiel in den Sencha-Touch-Charts Beispiel Ordnern. Es ist schon recht gut dargestellt

Answer 6

Hier ein Link zu einem Sencha Forum mit einigen Beispielen, wie ist ein Diagramm in eine bestehenden Sencha Touch 2.0-Anwendung zu übernehmen:

http://www.sencha.com/forum/showthread.php?190053-How-to-Integrate-Touch-2-Charts-into-an-existing-Sencha-Touch-2.0-Final-application.

Answer 7

Das Paket mit dem Diagramm api für Sencha existiert (http://dev.sencha.com/deploy/touch-charts-beta/examples/) aber scheint sehr schwer in die sencha touch Lösung zu integrieren

Die Lösung, die ich gefunden habe, ist die Testversion von Sencha Architect zu installieren, die bereits das Diagramm api enthält, ein mobiles Projekt erstellen (Projekt berühren) und es verpacken. Dann habe ich ein ganzes Paket mit den richtigen Abhängigkeiten und kann es wiederverwenden, ohne von Sencha Architect abhängig zu sein.