Ext拆线图及slider关联使用
页面代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--ExtJs框架开始-->
<link rel="stylesheet" type="text/css" href="./ext-4.2.1/resources/ext-theme-classic/ext-theme-classic-all.css" />
<script type="text/javascript" src="./ext-4.2.1/bootstrap.js"></script>
<script type="text/javascript" src="./ext-4.2.1/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="./js/jscore.js"></script>
<!--ExtJs框架结束-->
<script type="text/javascript">
Ext.onReady(function () {
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
var numAxis,
chart,
slider,
inc = 10;
axesRecords =[];
seriesRecords = [];
var store1 = Ext.create('Ext.data.JsonStore', {
fields: ['term', 'unit', 'decade', 'hundreds'],
data: []
});
var combo_quota =Ext.create("Ext.data.Store",{
fields:["key","value"],data:[{key:1,value:1},{key:10,value:10},{key:20,value:20},{key:30,value:30},{key:60,value:60}]
});
var generate = function(c){
var data = [];
for(var i = 0 ;i<c; i++){
data.push({
term: i+1,
unit: Math.floor(Math.random()*10),
decade: Math.floor(Math.random()*10),
hundreds: Math.floor(Math.random()*10)
});
}
return data;
};
Ext.define("Ext.custom.CustChart",{
//创建坐标轴
createAxes:function(axesRecords){
var axesArr = [];
for(var i = 0; i < axesRecords.length; i++){
var axis = {
type : axesRecords[i].type,
fields : axesRecords[i].fields,
position : axesRecords[i].position,
title : axesRecords[i].title,
label : nvl(axesRecords[i].label),
grid : nvl(axesRecords[i].grid),
constrain : nvl(axesRecords[i].constrain),
maximum : nvl(axesRecords[i].maximum),
minimum : nvl(axesRecords[i].minimum),
minorTickSteps : nvl(axesRecords[i].minorTickSteps)
};
axesArr.push(axis);
}
return axesArr;
},
createSeries:function(seriesRecords){
var seriesArr = [];
for(var i = 0; i < seriesRecords.length; i++){
var marker = {size: 4, radius: 4,'stroke-width': 0};
highlight = {size: 7,radius: 7};
extend(marker,nvl(seriesRecords[i].marker));
extend(highlight,nvl(seriesRecords[i].highlight));
var ser = {
type : seriesRecords[i].type,
xField : seriesRecords[i].xfield,
yField : seriesRecords[i].yfield,
axis : seriesRecords[i].axis,
smooth : true,
highlight:highlight,
markerConfig: marker,
tips : { trackMouse : true,width : 200,height : 30,
renderer : function(storeItem, item) {
this.setTitle(storeItem.get(item.series.xField)+":"+item.series.yField+":"+storeItem.get(item.series.yField));
}
},
label: {
display: 'under',
field: seriesRecords[i].yfield,
renderer: Ext.util.Format.numberRenderer('0'),
color: '#333'
}
};
seriesArr.push(ser);
}
return seriesArr;
},
createChart:function(axesRecords,seriesRecords){
var axes = this.createAxes(axesRecords);
var series = this.createSeries(seriesRecords);
var chart =Ext.create("Ext.chart.Chart",{
animate: true,shadow : false,itemId:"chartCmp",
store: store1,
axes: axes,
series:series,
renderTo: Ext.getBody(),
style: 'background:#fff',
legend: { position: 'top' }
});
return chart;
}
});
var gs = generate(120);
//图表面板
var chartpanel = {xtype:'panel',id:"chartpanel",region:"north",layout:'border',height:600,border:false,
items:[ chart],renderTo: Ext.getBody()
};
//整体面板
var panel = {xtype:'panel',id:"panel",region:"center",layout:'border',border:false,
items:[chartpanel, {xtype:'panel',id:"toppanel",region:"south",layout:'border',height:40,border:false,
html: '<div id = "basic-slider" style="margin-top:15px;margin-left:100px;"></div>',renderTo: Ext.getBody()
}]
};
//多选框选中、取消选中事件
var checkboxchange = function(field){
//t生成坐标
axesRecords = [
{type:"Numeric",fields:['unit', 'decade', 'hundreds'],position:"left",title:"Number of Hits",grid:true
,minimum:0,minorTickSteps:1,maximum:9},
{type:"Numeric",fields:["term"],position:"bottom",minimum:1,minorTickSteps:1,maximum:inc,grid:true,
title:"Number",constrain:true}
]
//生成图标
var unit = {type:"line",xfield:"term",yfield:"unit",axis:"left",markerConfig:{ type: 'cross'},highlight:{size: 7,radius: 7}};
decade = {type:"line",xfield:"term",yfield:"decade",axis:"left",markerConfig:{ type: 'circle'},highlight:{}};
hundreds = {type:"line",xfield:"term",yfield:"hundreds",axis:"left",highlight:{size: 7,radius: 7}};
var obj = (field.id == "unit")?unit:(field.id == "decade"?decade:hundreds);
var panel = win.child("#panel").child("#chartpanel");
if(field.checked){ //选中
if(seriesRecords.indexOf(obj) < 0 ) seriesRecords.push(obj);
axesRecords[1].maximum = inc == 1?10:inc;
}else{ //未选中
seriesRecords.remove(seriesRecords.indexOf(obj));
}
panel.removeAll(); //移除旧的图表
chart = new Ext.custom.CustChart().createChart(axesRecords,seriesRecords);
panel.add(chart); //添加新的图表
store1.loadData(gs); //加载数据
};
var win = Ext.create('Ext.window.Window', {
width:1000,
height: 700,
hidden: false,
maximizable: true,
title: 'Column Chart',
autoShow: true,
layout: 'fit',
tbar: [{xtype: 'fieldcontainer',defaultType: 'checkboxfield',width:200, layout: { type: "hbox" },items: [
{boxLabel:'unit',name: 'unit',labelWidth:40,checked:true,inputValue: 0,id: 'unit',margin: "5 0 0 15",listeners:{ change: checkboxchange}},
{boxLabel:'decade',name: 'decade',checked:false,inputValue: 1,margin: "5 0 0 15",id: 'decade',listeners:{ change: checkboxchange}},
{boxLabel:'hundreds',name: 'hundreds',checked:false,inputValue: 2,margin: "5 0 0 15",id: 'hundreds',listeners:{ change: checkboxchange}}
]
}, {xtype:"combobox",id:"quota",name:"quota",renderTo: Ext.getBody(),width:60,valueField:"key",displayField:"value",
store:combo_quota,typeAhead: true,queryMode: 'local',
listeners:{
afterRender:function(combo){
combo.setValue(combo_quota.getAt(1).get('key'));
},
select:function(combo){
inc= combo.getValue();
slider.increment = inc;
numAxis = chart.axes.get(1);
numAxis.maximum = inc == 1?10:inc;
store1.loadData(gs);
}
}
},
{xtype: 'datefield', fieldLabel: '日期', editable: true, width: 170, labelWidth:40, labelAlign: 'right',format: 'Y-m-d',id:"lotdate"},
{
text: 'Reload Data',
handler: function() {
var dd = Ext.getCmp("lotdate").getRawValue();
// store1.load(params:{startDate:dd},callback:function(){});
store1.loadData(generate(120));
}
},{
text: 'Save Chart',
handler: function() {
Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function(choice){
if(choice == 'yes'){
chart.save({
type: 'image/png'
});
}
});
}
}],
items: [panel]
});
slider = Ext.create('Ext.slider.Single', {
renderTo: 'basic-slider',width: 750,
minValue: 0,hideLabel: true,useTips: true,
increment: inc,maxValue: 120,
tipText: function(thumb){
return Ext.String.format('<b>{0}/{1}</b>', thumb.value,120);
},
listeners:{
change:function(slider, newValue, thumb){
numAxis = chart.axes.get(1);
var markerIndex =1 ;
incr = slider.increment;
if( slider.increment == 1) incr = 10;
numAxis.maximum = thumb.value<=incr?inc:thumb.value;
numAxis.minimum = thumb.value<=incr?1:thumb.value - incr;
chart.markerIndex = markerIndex;
store1.loadData(gs);
}
}
});
checkboxchange(Ext.getCmp("unit"));
});
</script>
</head>
<body>
<!-- 看啥看 -->
<div id = "mydiv"></div>
</body>
</html>
相关js代码：
/**
* 获取数组元素的坐标
*/
Array.prototype.indexOf = function(para){
var idx = -1;
for( var i = 0; i <this.length; i++){
if(this[i] === para) idx =i;
}
return idx;
}
/**
* 获取数组指定坐标的元素
*/
Array.prototype.remove = function(idx){
for(var i = idx; i < this.length - 1; i ++){
this[i] = this[i+1];
}
this.length = this.length - 1;
}