Graph sencha触摸和图表

有没有人能够将图表和图表整合到Sencha Touch中

如果是这样，请举个例子

---

谢谢

我当时的印象是，拉斐尔（）最终将因其“图形组件”（graphing component）而被纳入Sencha Touch。在此之前，您可以很容易地包含额外的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>

外部设置({
onReady:function（）
{
//设置主面板！
var tabPanel=新的外部面板
({
全屏：对，
html:'
});
//试着画一张图表！
var r=拉斐尔（“图”）；
r、 g.txattr.font='12px Helvetica，Arial，无衬线'；
r、 文本（150250，“带标题的演示图”）；
r、 线条图（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:“01”，symbol:“o”，smooth:true}）；
}
});

看一看。已经有人把制图移到了Snecha Touch。还有消息说，SenchaTouch的下一个版本将包括图表

Sencha Touch刚刚推出

他们现在有了一些例子。它们应该有帮助

以下是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);
        }
    }
});

---

有关更多代码示例，请查看Sencha Touch Charts示例文件夹中的EnergyApp示例。这里有一个指向Sencha论坛的链接，其中有一些示例说明如何将图表合并到现有Sencha Touch 2.0应用程序中：

---

.

具有Sencha图表api的软件包已经存在（），但似乎很难集成到Sencha touch解决方案中（文件依赖项、函数未在Sencha touch软件包的某些版本中定义）

---

我找到的解决方案是安装Sencha Architect的试用版，其中已经包含graph api，创建一个移动项目（touch项目）并对其进行打包。然后，我有一个完整的软件包，具有正确的依赖项，我可以重用它，而无需依赖Sencha Architect。

现在有一个官方支持的Sencha Touch图表软件包。它在ExtJS变体的基础上增加了更多的功能（例如触摸交互）。自从ST2.1发布以来，就可以使用它了。选中，向下滚动至“Sencha Architect Updated”，您在其中找到了有关触摸图的视频。如果您想要开源图表，您可以使用OpenCharts for Sencha Touch：