我们有没有办法让滑块与图表(即条形图或折线图)?在更改滑块时(假设多个滑块具有最小值和最大值),必须更改图形。
假设滑块控件位于下方,而图表位于上方。与我的要求相关的东西我发现在以下链接。任何人都建议我如何实现这是extjs 4及以下
例如https://developers.google.com/chart/interactive/docs/gallery/controls
答案 0 :(得分:0)
您可以使用我考虑过您的要求的以下代码段以及https://developers.google.com/chart/interactive/docs/gallery/controls上的示例
Ext.application({
name : 'Fiddle',
launch : function() {
//default global data
var data = [{ 'name': 'Michael', 'count': 5 },
{ 'name': 'Elisa', 'count': 7 },
{ 'name': 'Robert', 'count': 3 },
{ 'name': 'John', 'count': 2 },
{ 'name': 'Jessica', 'count': 6 },
{ 'name': 'Aaron', 'count': 1 },
{ 'name': 'Margareth', 'count': 8 }
];
//custom function to filter data by new sliderVal
var filterDataByCount = function(sliderVal) {
var filteredData = [];
for(var i = 0; i < data.length; i++) {
//filter data whose count is less than sliderVal
if(data[i].count < sliderVal) {
filteredData.push(data[i]);
}
}
return filteredData;
};
//Define a store with fields name, count of cookies
var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'count'],
data: data
});
//Define a pie chart with above store
var chart = Ext.create('Ext.chart.Chart', {
width: 500,
height: 350,
animate: true,
store: store, //store set to one that defined above
theme: 'Base:gradients',
series: [{
type: 'pie',
angleField: 'count',
showInLegend: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ' ate ' + storeItem.get('count') + ' cookies');
}
},
label: {
field: 'name',
display: 'rotate',
font: '18px Arial'
}
}]
});
//Define slider
var slider = Ext.create('Ext.slider.Single', {
width: 200,
value: 50,
increment: 1,
minValue: 0,
maxValue: 10,
listeners: {
changecomplete: function(slider, newVal) {
//reload chart with filteredData on slider change
chart.store.loadData(filterDataByCount(newVal));
//Ideally u should be loading filtered data by doing call to backend with queryparam set to "newVal"
}
}
});
//Define panel that is rendered on body and contains chart, slider items
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
layout: 'vbox',
items: [
chart,
slider
]
})
}
});
您可以参考相同Fiddle link
的链接