sencha觸摸和圖表

Question

有沒有人能夠將圖表和圖形納入Sencha Touch？

如果是這樣，一個例子將不勝感激。

感謝

Answer 1

我是拉斐爾（http://raphaeljs.com/）最終會被納入煎茶觸摸它的構圖組件（http://g.raphaeljs.com/）的印象。在此之前，您可以非常輕鬆地添加額外的Raphael .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/。有人已將圖表移至Snecha Touch。另外還有消息稱Sencha Touch的下一個版本將包括圖表。

Answer 3

煎茶觸摸Charts剛剛released

Answer 4

他們現在有一些例子。他們應該幫助http://dev.sencha.com/deploy/touch-charts-beta/examples/

Answer 5

下面是煎茶觸摸

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

一個示例圖表守則更多代碼示例走在煎茶 - 觸摸圖表示例文件夾看看EnergyApp例。它被描繪得很好

Answer 6

這裏是一個煎茶論壇鏈接着如何圖表整合到現有的煎茶觸摸2.0應用程序的一些例子：

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

與圖表API用於煎茶的包存在（http://dev.sencha.com/deploy/touch-charts-beta/examples/），但似乎很難在煎茶觸摸溶液整合（文件依賴關係，功能不是在一些版本的煎茶觸摸包的定義）。

我找到的解決方案是安裝Sencha Architect的試用版，該版本已經包含圖形api，創建一個移動項目（touch項目）並將其打包。然後，我有一個包含正確依賴關係的整個包，我可以在不依賴Sencha Architect的情況下重用它。