如何使用数百个点绘制股票图或折线图？我已禁用常规折线图中的动画，但仍然过于沉重和缓慢。
ExtJS 4 中的股票图表
4
- Handsome Nerd
4
2就我所尝试的ExtJS 4而言，它非常缓慢和沉重 =) - Subdigger
我也很喜欢ExtJS 4中的图表。我在一个项目中使用了它们，但是我太累了，不得不为用户的“缓慢和有错误”的报告进行辩护。最后只好切换回FusionCharts。（导致我放弃的最后一根稻草是一个严重的工具提示相关错误，明显显示错误的数据。如果两行“靠近”，则意图用于一行的工具提示将在悬停某些其他行时显示） - Amol Katdare
我们正在考虑从ExtJS3+Flot转换到ExtJS4，但是我越深入细节，就越感到沮丧...有人比较过flot和ExtJS4图表的功能和性能吗？ - Erich Kitzmueller
如果你想大量自定义图表的样式，我建议你避开Ext 4 - 渲染方面有很多bug，你会花费一整天的时间来尝试在不同浏览器之间达到相对一致的效果。（希望这些问题在4.1版本中得到解决！） - Mark Rhodes
5个回答
4
我最近写了一篇关于在Ext JS 4中创建股票图表的博客文章 - http://www.scottlogic.co.uk/2011/12/ext-js-4-stock-charts/。该图表使用了几百个点，在现代浏览器中运行良好，在IE7-8中也不错。
然而，即使在调整过Ext JS构建系统之后，运行该图表的最小Ext构建仍然需要约0.5MB，这对于某些应用程序来说太重量级了。但是，如果你愿意花时间尝试找出所需的规则，Ext-all.css中的CSS可以缩减为只有几个规则！
然而，即使在调整过Ext JS构建系统之后，运行该图表的最小Ext构建仍然需要约0.5MB，这对于某些应用程序来说太重量级了。但是，如果你愿意花时间尝试找出所需的规则，Ext-all.css中的CSS可以缩减为只有几个规则！
- Mark Rhodes
3
我的应用完全基于Ext-JS。然而，当性能成为问题时，我使用flot。它的API设计更好（我是一个Ext-JS的粉丝），并且它的性能表现更好。但是，如果需要与图表交互，就需要使用原始像素数据（基于像素的画布）。由于在Ext-JS中，所有内容都是SVG对象，因此您可以简单地将事件处理程序附加到线条或任何其他自己绘制的内容上。
例如，对于波形监视器，我们使用flot。对于另一个图表，在该图表中，我们允许用户在屏幕上拖放一些线条，我们使用Ext-JS图表。
以下是一个简单的包装器，可将flot用作Ext.Component。
例如，对于波形监视器，我们使用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);
}
});
- Ruan Mendes
1
这里有一个完整的示例，介绍如何为Sencha Charts创建股票折线图：
http://dev.sencha.com/deploy/touch-charts-1.0.0/examples/Stock/
正如您所见，该示例轻松处理了超过100个数据点。
该示例是针对触摸图表的，但API与Sencha的ExtJS 4几乎相同。复制并粘贴图表实例化代码即可完成工作。
- Nicolas
1
如果您动态生成ExtJS代码（PHP、Python、ASP.NET等），并且数据源是静态的，那么您可以轻松地生成图表到PNG格式，并在Ext.Panel中加载它。
- TheHorse
1
我发现flot（http://code.google.com/p/flot/）在处理许多点/系列时具有更好的性能，而ExtJS 4图表的性能是无法接受的。Flot还具有更清晰的API，并以简单的格式读取数据。
- Adrian Heilbut
1
除了数据格式之外，我同意所有内容。Ext-JS使用数据读取器可以让你将任何类型的数据传递到存储中。 - Ruan Mendes
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接