Мое приложение полностью основано на 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);
}
});