Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.05.2012, 13:16
wUI wUI вне форума
Аспирант
Отправить личное сообщение для wUI Посмотреть профиль Найти все сообщения от wUI
 
Регистрация: 19.04.2012
Сообщений: 78

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]
        }

Есть идеи?
Ответить с цитированием
  #2 (permalink)  
Старый 11.05.2012, 15:04
Профессор
Отправить личное сообщение для DjDiablo Посмотреть профиль Найти все сообщения от DjDiablo
 
Регистрация: 04.02.2011
Сообщений: 1,815

кое какие мыслишки.

В мойм стареньком мануале написано как то так.
Но помоему в новых версиях это не проканает.

//получим элемент
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, 11.05.2012 в 15:24.
Ответить с цитированием
  #3 (permalink)  
Старый 11.05.2012, 15:29
wUI wUI вне форума
Аспирант
Отправить личное сообщение для wUI Посмотреть профиль Найти все сообщения от wUI
 
Регистрация: 19.04.2012
Сообщений: 78

DjDiablo,
спасибо =) проверю оба варианта предложенные Вами и позже отпишусь.
Ответить с цитированием
  #4 (permalink)  
Старый 11.05.2012, 15:45
Профессор
Отправить личное сообщение для DjDiablo Посмотреть профиль Найти все сообщения от DjDiablo
 
Регистрация: 04.02.2011
Сообщений: 1,815

Эксперементально вышел вот на такую схему.
Проверил, работает.

var chart= Ext.getCmp('LineChart');

	chart.axes.items[0].minimum=40;
	chart.axes.items[0].maximum=80;
	chart.axes.items[0].drawAxis();
__________________
Лучше калымить в гандурасе чем гандурасить на колыме
Ответить с цитированием
  #5 (permalink)  
Старый 12.05.2012, 06:14
wUI wUI вне форума
Аспирант
Отправить личное сообщение для wUI Посмотреть профиль Найти все сообщения от wUI
 
Регистрация: 19.04.2012
Сообщений: 78

DjDiablo,
Первый вариант: chart.yAxis.minimum = newMinimum;
Вываливался у меня с ошибками.
А вот второй вариант работает превосходно, единственное раз у меня объекты заводятся в переменные, то необходимость в var chart= Ext.getCmp('LineChart'); отпадает. Можно сразу LineChart.axes.items[0].maximum=80;
Еще раз огроменское СПАСИБО!
Ответить с цитированием
  #6 (permalink)  
Старый 22.05.2012, 15:50
wUI wUI вне форума
Аспирант
Отправить личное сообщение для wUI Посмотреть профиль Найти все сообщения от wUI
 
Регистрация: 19.04.2012
Сообщений: 78

DjDiablo,
Вопрос по этой же теме

По умолчанию график у ExtJS отсраивается с автоопределением значения maximum. Вот в предыдущем посте я присвоил значению максимум нужное мне число.
Не смог найти в мануале ExtJS возможность сброса присвоения значения maximum, чтобы отрисовка опять была с автоподгоняемым размером. Посоветуете?

P.S. Один из вариантов вижу, - перебор полученных массивов со значениями :
Array.max = function( array ){
	    return Math.max.apply( Math, array );
	};

Затем присвоение в maximum нужного числа.
Ответить с цитированием
  #7 (permalink)  
Старый 23.05.2012, 10:20
wUI wUI вне форума
Аспирант
Отправить личное сообщение для wUI Посмотреть профиль Найти все сообщения от wUI
 
Регистрация: 19.04.2012
Сообщений: 78

Ну собственно как и писал в 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);
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Масштабирование графиков luxor1992 Dojo toolkit 2 18.02.2012 22:18
Построение графиков на JS или Flash StingMU Работа 3 05.06.2011 22:11