Question

如何绘制数百点的股票图表或折线图？我在常规折线图中禁用动画，但没有成功，仍然太沉重和缓慢。

Answer 1

我最近写了一篇关于在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中找出你需要的那些！

Answer 2

我的应用程序完全基于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);
    }
});

Answer 3

如果您动态生成extjs代码（php，python，asp.net ...）并且数据源是静态的 - 您可以轻松地生成图表以便在png中加载并将其加载到ext.panel。

Answer 4

我发现flot（http://code.google.com/p/flot/）在很多点/系列中都有更好的表现，而ExtJS 4图表的表现是不可接受的。 Flot还有一个更清晰的API，并以简单的格式读取数据。

Answer 5

这里有一个关于如何为Sencha Charts创建股票线图的完整示例：

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

如您所见，示例处理＆gt;容易100个数据点。

该示例适用于触摸图，但API与Sencha的ExtJS中的API几乎完全相同。复制和粘贴图表实例代码应该可以完成工作。

ExtJS 4中的股票图表

5 个答案: