sencha touch и диаграммы

Question

Кто-нибудь мог включить диаграммы и графики в Sencha Touch?

Если да, то пример будет оценен.

Благодаря

Answer 1

Я был под впечатлением, что Рафаэль (http://raphaeljs.com/), в конечном счете быть включен в Сенче Touch, для его компоненты графиков (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 примере в примере папки Сенча-Touch-Charts. Его изображали довольно хорошо

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 для Sencha существует (http://dev.sencha.com/deploy/touch-charts-beta/examples/), но очень сложно интегрировать в сенсорное решение sencha (зависимость от файлов, функция не определена в некоторой версии сенсорного пакета sencha).

Решение, которое я нашел, - это установить пробную версию Sencha Architect, которая уже включает график api, создать мобильный проект (проект касания) и упаковать его. Тогда у меня есть целый пакет с правильными зависимостями, и я могу его повторно использовать, не зависимо от Sencha Architect.