9

チャートやグラフをSenchaTouchに組み込むことができた人はいますか？

もしそうなら、例をいただければ幸いです。

ありがとう

4

7 に答える 7

7

SenchaTouchChartsがリリースされました

于 2011-07-25T03:12:57.707 に答える
4

私は、Raphael（http://raphaeljs.com/ ）が最終的にそのグラフ作成コンポーネント（ http://g.raphaeljs.com/ ）のためにSenchaTouchに組み込まれるという印象を受けました。それまでは、追加の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>
于 2010-11-22T14:39:17.303 に答える
4

http://code.google.com/p/oppo-touching/をご覧ください。誰かがすでにチャートをSnechaTouchに移動しました。また、SenchaTouchの次のバージョンにチャートが含まれるというニュースもあります。

于 2011-04-20T13:14:05.327 に答える
0

彼らは今いくつかの例を持っています。彼らはhttp://dev.sencha.com/deploy/touch-charts-beta/examples/を助けるべきです

于 2011-08-06T18:12:48.317 に答える
0

SenchaTouchのサンプルチャートのコードは次のとおりです

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の例をご覧ください。それは非常によく描かれています

于 2012-03-06T05:08:01.513 に答える
0

チャートを既存のSenchaTouch2.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。

于 2012-05-02T14:49:55.777 に答える
0

SenchaのチャートAPIを含むパッケージは存在しますが（http://dev.sencha.com/deploy/touch-charts-beta/examples/）、sencha touchソリューションに統合するのは非常に難しいようです（ファイルの依存関係、関数はで定義されていません）煎茶タッチパッケージのいくつかのバージョン）。

私が見つけた解決策は、グラフAPIがすでに含まれているSencha Architectの試用版をインストールし、モバイルプロジェクト（タッチプロジェクト）を作成してパッケージ化することです。次に、適切な依存関係を持つパッケージ全体があり、SenchaArchitectに依存せずに再利用できます。

于 2013-03-17T08:56:42.577 に答える