ExtJS 4 中的股票图表

Posted 2023-02-22

【中文标题】ExtJS 4 中的股票图表

【英文标题】：Stock chart in ExtJS 4

【发布时间】：2011-10-18 03:34:41

【问题描述】：

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

【问题讨论】：

就我尝试 extjs 4 而言，这一切都很慢而且很重 =)

我也对 ExtJS 4 中的图表感到兴奋。我在其中一个项目中使用了它们，然后我厌倦了保护它免受用户“缓慢和错误”的报告。最后只是切换回FusionCharts。 （最后一根稻草是一个严重的与工具提示相关的错误，它公然显示错误的数据。如果两行“靠近”，则用于一行的工具提示将显示在悬停在另一行上时）

我们考虑从 ExtJS3+Flot 切换到 ExtJS4，但越深入细节就越气馁……有没有人比较 flot 和 ExtJS4 图表的功能和性能？跨度>

如果你想大量自定义图表的样式，我建议你避开 Ext 4 - 渲染有很多错误，你会花一整天的时间来尝试获得它浏览器之间也一样。 （希望其中一些将在 4.1 中修复！）

【参考方案1】：

我最近写了一篇关于在 Ext JS 4 中创建股票图表的博客文章 - http://www.scottlogic.co.uk/2011/12/ext-js-4-stock-charts/。它使用了几百个点，在现代浏览器中表现良好，在 IE7-8 中也不算太差。

这就是说，即使在搞乱了 Ext JS 构建系统之后，运行图表所需的最小 Ext 构建仍然是 0.5MB，这对于某些应用程序来说太重了。然而，CSS 可以被缩减为几条规则——如果您愿意花时间尝试从庞大的 ext-all.css 中找出您需要哪些规则！

【参考方案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);
    
);

【参考方案3】：

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

【参考方案4】：

我发现 flot (http://code.google.com/p/flot/) 在许多点/系列上的性能要好得多，而 ExtJS 4 图表的性能是不可接受的。 Flot还有更清晰的API，以简单的格式读取数据。

【讨论】：

我同意一切，除了数据格式。 Ext-JS 允许您使用数据读取器将任何类型的数据传递到存储中。

【参考方案5】：

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

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

如您所见，该示例可以轻松处理超过 100 个数据点。

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