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 构建仍然像 0.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

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

于 2011-08-08T16:03:18.970 回答
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 回答