sencha touch et graphiques

J'étais sous l'impression que Raphael (http://raphaeljs.com/) finirait par être incorporé dans le Sencha Touch pour ses graphiques composant (http://g.raphaeljs.com/). D'ici là, vous pouvez très facilement, il suffit d'inclure les extra-Raphaël .js fichiers et de faire des graphiques de cette façon. Quelque chose comme:

<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>

OriginalL'auteur endemic

Prendre un coup d'oeil à http://code.google.com/p/oppo-touching/. Quelqu'un s'est déjà déplacé la création de graphiques pour Snecha Touch. Aussi il ya des nouvelles que la prochaine version de Sencha Touch comprendra la création de graphiques.

OriginalL'auteur Huang

Voici le code pour un échantillon graphique de 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);
}
}
});

Pour plus d'exemples de code jeter un oeil à la EnergyApp Exemple dans le Sencha Touch Graphiques exemple de dossier. Son été dépeint assez bien

OriginalL'auteur SashaZd

Le paquet avec le tableau de l'api pour le Sencha existe ( http://dev.sencha.com/deploy/touch-charts-beta/examples/ ), mais il semble très difficile de s'intégrer dans le sencha touch (fichiers de dépendance, la fonction n'est pas définie dans l'une des versions de la sencha touch).

La solution que j'ai trouvé est d'installer la version d'essai de Sencha Architect qui comprennent déjà l'api graphique, création d'un projet mobile (touche de projet) et de les emballer. Alors j'ai tout un paquet avec le droit des dépendances et je peux la réutiliser sans dépendre d'un Sencha Architect.

OriginalL'auteur zhoufei