4

何百ポイントもの株価チャートや折れ線グラフを描くにはどうすればよいですか？通常の折れ線グラフでアニメーションを無効にしましたが、成功せず、重すぎて遅すぎます。

4

5 に答える 5

4

私は最近、Ext JS 4 での株価チャートの作成に関するブログ記事を書きました - http://www.scottlogic.co.uk/2011/12/ext-js-4-stock-charts/。数百ポイントを使用し、最新のブラウザーで問題なく動作し、IE7-8 でもそれほど悪くはありません。

ただし、Ext JS ビルド システムをいじった後でも、チャートを実行するために必要な Ext ビルドの最小サイズは .5MB 程度であり、アプリケーションによっては重すぎます。ただし、CSS はいくつかのルールに切り詰めることができます - 巨大な ext-all.css から必要なものを見つけようと時間を費やすつもりなら!

于 2011-12-01T08:18:05.113 に答える
3

私のアプリは完全に Ext-JS ベースです。ただし、パフォーマンスが問題になる場合は、flot を使用します。API の設計は大幅に改善されており (私は Ext-JS のファンです)、パフォーマンスも大幅に向上しています。これは、チャートを操作する必要がある場合に、生のピクセル データ (ピクセル ベースのキャンバス) を操作することを犠牲にしています。Ext-JS ではすべてが SVG オブジェクトであるため、単純にイベント ハンドラーを線やその他自分で描画したものにアタッチできます。

例えば。波形モニターには flot を使用します。ユーザーが画面上でいくつかの線をドラッグ アンド ドロップできる別のチャートでは、Ext-JS チャートを使用します。

flot を Ext.Component として使用する単純なラッパーを次に示します。

Ext.define('cci.view.wavemon.Flot',  {
    extend: 'Ext.Component',
    alias: 'widget.cci-flot',

    /**
     * @cfg {number[][]} data The data to be drawn when it gets rendered
     */
    data: null,

    /**
     * @cfg {object} flotOptions
     * The options to be passed in to $.plot
     */
    flotOptions: null,

    /**
     * @property
     * The Flot object used to render the chart and to manipulate it in the future. It will only
     * be available after the first resize event
     * You may not set this property but you are free to call methods on it
     */
    flot: null,

    initComponent: function() {
        this.callParent(arguments);
        // The only time that we're guaranteed to have dimensions is after the first resize event
        this.on('resize',  function(comp) {
            if (!this.flot) {
                this.flot = $.plot(this.getTargetEl().dom, this.data, this.flotOptions);
            } else {
                // Flot knows to look at the containers size and resize itself
                this.flot.resize();
            }
        }, this);
    }
});
于 2011-10-12T21:29:25.317 に答える
1

動的に extjs コード (php、python、asp.net...) を生成し、データ ソースが静的である場合は、簡単にチャートを png に生成して ext.panel にロードできます。

于 2011-08-02T20:32:16.547 に答える
1

Sencha Charts の株価チャートを作成する方法の完全な例がここにあります:

http://dev.sencha.com/deploy/touch-charts-1.0.0/examples/Stock/

ご覧のとおり、この例では 100 個を超えるデータ ポイントを簡単に処理できます。

この例はタッチ チャート用ですが、API は Sencha の ExtJS 4 のものとほぼ同じです。チャートのインスタンス化コードをコピーして貼り付ければ、うまくいくはずです。

于 2011-10-13T15:57:57.500 に答える
1

flot (http://code.google.com/p/flot/) は多くのポイント/シリーズでパフォーマンスがはるかに優れていることがわかりましたが、ExtJS 4 チャートのパフォーマンスは受け入れられませんでした。また、Flot にはよ​​り明確な API があり、単純な形式でデータを読み取ります。

于 2011-08-08T16:03:18.970 に答える