我在jsonStore中有超过100个项目(它是dimamicly加载,因此它可能在功能中更多)并且想要使用图表显示它们。不幸的是,一次渲染所有功能会使图表无法读取。我想以20个项目的组显示它们。 如何添加“分页”机制?是否有可能为要呈现的数据添加限制和偏移量?
答案 0 :(得分:0)
是的。只需paginate
本地/远程store
附加chart
即可。
Ext.require([
'Ext.chart.*',
'Ext.Window',
'Ext.fx.target.Sprite',
'Ext.layout.container.Fit',
'Ext.window.MessageBox'
]);
Ext.onReady(function() {
window.generateData = function(n, floor) {
var data = [],
p = (Math.random() * 11) + 1,
i;
floor = (!floor && floor !== 0) ? 20 : floor;
for (i = 0; i < (n || 12); i++) {
data.push({
name: Ext.Date.monthNames[i % 12],
data1: Math.floor(Math.max((Math.random() * 100), floor)),
data2: Math.floor(Math.max((Math.random() * 100), floor)),
data3: Math.floor(Math.max((Math.random() * 100), floor)),
data4: Math.floor(Math.max((Math.random() * 100), floor)),
data5: Math.floor(Math.max((Math.random() * 100), floor)),
data6: Math.floor(Math.max((Math.random() * 100), floor)),
data7: Math.floor(Math.max((Math.random() * 100), floor)),
data8: Math.floor(Math.max((Math.random() * 100), floor)),
data9: Math.floor(Math.max((Math.random() * 100), floor))
});
}
return data;
};
window.store1 = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7', 'data9', 'data9'],
data: generateData(),
pageSize: 3,
page: 0
});
window.doFilter = function() {
var k = 0,
start = store1.page * store1.pageSize;
store1.clearFilter();
if(start<0) start = 0;// add the max page test :P
store1.filter(function(r) {
return k++ >= start && k <= start + store1.pageSize;
});
}
doFilter();
var chart = Ext.create('Ext.chart.Chart', {
style: 'background:#fff',
animate: true,
shadow: true,
store: store1,
axes: [{
type: 'Numeric',
position: 'left',
fields: ['data1'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Number of Hits',
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Month of the Year'
}],
series: [{
type: 'column',
axis: 'left',
highlight: true,
tips: {
trackMouse: true,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + ' $');
}
},
label: {
display: 'insideEnd',
'text-anchor': 'middle',
field: 'data1',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'vertical',
color: '#333'
},
xField: 'name',
yField: 'data1'
}]
});
var win = Ext.create('Ext.panel.Panel', {
renderTo:Ext.getBody(),
width: 500,
height: 300,
minHeight: 300,
minWidth: 550,
hidden: false,
maximizable: true,
title: 'Column Chart',
autoShow: true,
layout: 'fit',
items: chart,
tbar: [{
text: 'Prev',
handler: function() {
store1.page--;
doFilter();
}
}, {
text: 'Next',
handler: function() {
store1.page++;
doFilter();
}
}]
});
});
&#13;
<script src="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/ext-debug-w-comments.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/resources/css/ext-all-debug.css" rel="stylesheet" />
&#13;