Javascript-форум (https://javascript.ru/forum/)
-   ExtJS (https://javascript.ru/forum/extjs/)
-   -   Min/max в осях графиков. (https://javascript.ru/forum/extjs/28215-min-max-v-osyakh-grafikov.html)

wUI 11.05.2012 13:16

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

Есть идеи?:)

DjDiablo 11.05.2012 15:04

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

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

//получим элемент
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

wUI 11.05.2012 15:29

DjDiablo,
спасибо =) проверю оба варианта предложенные Вами и позже отпишусь.

DjDiablo 11.05.2012 15:45

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

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

	chart.axes.items[0].minimum=40;
	chart.axes.items[0].maximum=80;
	chart.axes.items[0].drawAxis();

wUI 12.05.2012 06:14

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

wUI 22.05.2012 15:50

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

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

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

Затем присвоение в maximum нужного числа.

wUI 23.05.2012 10:20

Ну собственно как и писал в 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.