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, время: 13:54. |