Sencha स्पर्श और चार्ट

Question

किसी Sencha टच में चार्ट और ग्राफ़ शामिल करने में सक्षम हो गया है?

यदि हां, तो एक उदाहरण की सराहना की जाएगी।

धन्यवाद

Answer 1

मैं धारणा है कि राफेल (http://raphaeljs.com/) अंत में 'अपने रेखांकन घटक (http://g.raphaeljs.com/) के लिए Sencha टच में शामिल किया जाएगा के तहत किया गया। तब तक, आप आसानी से अतिरिक्त राफेल .js फ़ाइलों को शामिल कर सकते हैं और इस तरह ग्राफ बना सकते हैं। कुछ ऐसा:

<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

http://code.google.com/p/oppo-touching/ पर एक नज़र डालें। कोई पहले से ही स्नेचा टच पर चार्टिंग ले जाया गया है। इसके अलावा खबर भी है कि सेन्चा टच के अगले संस्करण में चार्टिंग शामिल होगी।

Answer 3

Sencha टच Charts सिर्फ किया गया है released

Answer 4

वे अब कुछ उदाहरण है। वे मदद करनी चाहिए http://dev.sencha.com/deploy/touch-charts-beta/examples/

Answer 5

यहाँ Sencha टच

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); 
     } 
    } 
}); 

में एक नमूना चार्ट के लिए कोड है के लिए अधिक कोड उदाहरण Sencha टच-चार्ट उदाहरण फ़ोल्डर में EnergyApp उदाहरण पर एक नज़र डालें। इसके चित्रित किया गया बहुत अच्छी तरह से

Answer 6

यहां किसी मौजूदा Sencha टच 2.0 आवेदन में एक चार्ट को शामिल करने के कुछ उदाहरण के साथ एक Sencha फोरम में लिंक है:

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

मौजूद Sencha के लिए चार्ट एपीआई के साथ पैकेज (http://dev.sencha.com/deploy/touch-charts-beta/examples/), लेकिन Sencha स्पर्श समाधान में एकीकृत करने के लिए बहुत मुश्किल प्रतीत होता है (फ़ाइलों निर्भरता, Sencha स्पर्श पैकेज के कुछ संस्करण में परिभाषित नहीं समारोह)।

समाधान मैंने पाया है, जो पहले से ही ग्राफ API शामिल Sencha वास्तुकार के परीक्षण संस्करण को स्थापित करने के लिए एक मोबाइल परियोजना (स्पर्श परियोजना) बना सकते हैं और यह पैकेज है। तब मेरे पास सही निर्भरता के साथ एक पूरा पैकेज है और मैं इसे सेन्चा आर्किटेक्ट के आधार पर पुन: उपयोग कर सकता हूं।