Min/max в осях графиков.
Всем доброго времени суток:)
При написании системы графиков возник вопрос: Есть ли в ExtJS возможность присвоения min и max для осей графиков? Небольшой пример: var LineChart = Ext.create('Ext.chart.Chart', { height: 600, width: 980, x: 0, y: 0, id: 'LineChart', xtype: 'chart', style: 'background:#fff', animate: true, store: store, axes: [{ type: 'Numeric', position: 'left', fields: ['data1'], grid: true, minimum: 0 // вот эти самые значения, которые нужно изменять. maximum: 100 }, { type: 'Category', position: 'bottom', fields: ['name'] }], series: [{ type: 'line', axis: 'left', gutter: 80, xField: 'name', yField: ['data1'], tips: { trackMouse: true, width: 165, height: 28, renderer: function(storeItem, item) { this.setTitle(storeItem.get('name') + ' : ' + storeItem.get('data1')); } }, style: { fill: '#38B8BF' } }] }); var finalPanel = Ext.create('Ext.panel.Panel', { width: 1016, height: 780, frame: true, title: 'График', renderTo: document.body, layout: 'vbox', items: [{ xtype: 'fieldset', height: 100, width: 1000, collapsible: true, title: 'Параметры запроса', layout: 'absolute', items: [{ // Созданные объекты для ввода значений min/max x: 0, y: 35, xtype: 'textfield', name: 'min', id: 'min', emptyText: 'значение MIN', fieldLabel: 'Мин. значение', allowBlank: false },{ x: 270, y: 35, xtype: 'textfield', name: 'max', id: 'max', emptyText: 'значение MAX', fieldLabel: 'Макс. значение', allowBlank: false },{ width: 90, xtype: 'button', text: 'Выполнить', handler: function() { par1 = Ext.getCmp('min').getValue(); par2 = Ext.getCmp('max').getValue(); Ext.getCmp('LineChart')./*как-то передаем значение par1/par2 в min/max*/; store.load(); } }] },{ xtype: 'fieldset', id: 'oLineCharts', x: 0, y: 150, height: 630, width: 1000, title: 'график', layout: 'fit', items: [LineChart] } Есть идеи?:) |
кое какие мыслишки.
В мойм стареньком мануале написано как то так. Но помоему в новых версиях это не проканает. //получим элемент var chart= Ext.getCmp('LineChart'); // (для отладки) убедимся что мы действительно получили chart, посмотрим в консоль console.log(chart); //установим значения chart.yAxis.minimum = newMinimum; chart.yAxis.maximum = newMaximum; //если нужна перерисовка chart.redraw(); прямой доступ к axes var chart= Ext.getCmp('LineChart'); chart.axes.items[0].minimum chart.axes.items[0].maximum chart.axes.items[1].minimum chart.axes.items[1].maximum |
DjDiablo,
спасибо =) проверю оба варианта предложенные Вами и позже отпишусь. |
Эксперементально вышел вот на такую схему.
Проверил, работает. var chart= Ext.getCmp('LineChart'); chart.axes.items[0].minimum=40; chart.axes.items[0].maximum=80; chart.axes.items[0].drawAxis(); |
DjDiablo,
Первый вариант: chart.yAxis.minimum = newMinimum; Вываливался у меня с ошибками. А вот второй вариант работает превосходно, единственное раз у меня объекты заводятся в переменные, то необходимость в var chart= Ext.getCmp('LineChart'); отпадает. Можно сразу LineChart.axes.items[0].maximum=80; Еще раз огроменское СПАСИБО! :) |
DjDiablo,
Вопрос по этой же теме:) По умолчанию график у ExtJS отсраивается с автоопределением значения maximum. Вот в предыдущем посте я присвоил значению максимум нужное мне число. Не смог найти в мануале ExtJS возможность сброса присвоения значения maximum, чтобы отрисовка опять была с автоподгоняемым размером. Посоветуете? P.S. Один из вариантов вижу, - перебор полученных массивов со значениями : Array.max = function( array ){ return Math.max.apply( Math, array ); }; Затем присвоение в maximum нужного числа. |
Ну собственно как и писал в P.S., сделал такой выход:
function MaxReturn(maxP){ return maxP; } var xChartColumn = new Array(); var yChartColumn = new Array(); store.on('load', function(store, records) { maxP = records[0].get('data1'); for (var i = 0; i < records.length; i++) { xChartColumn[i] = records[i].get('name2'); yChartColumn[i] = records[i].get('data1'); if (yChartColumn[i] > maxP) { maxP = yChartColumn[i]; } }; MaxReturn(maxP); }); ... // Затем в нужном месте: LineChart.axes.items[0].minimum = 0; LineChart.axes.items[0].maximum = maxP; LineChart.axes.items[0].drawAxis(); LineChart.redraw(true); |
Часовой пояс GMT +3, время: 06:06. |