<!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/css/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/ext-lang-zh_CN.js"></script>
<!--ExtJs框架结束-->
<script type="text/javascript">
Ext.onReady(function () {
//QuickTips的作用是初始化标签中的Ext:Qtip属性，并为它赋予显示提示的动作。
Ext.QuickTips.init();
//TextField的提示方式为：在右边缘，如上图所示，参数枚举值为"qtip","title","under","side",id(元素id)，
//side方式用的较多，右边出现红色感叹号，鼠标上去出现错误提示。
Ext.form.Field.prototype.msgTarget = 'side';
var numAxis,
chart;
var generateData = (function(n, floor){
var data = [],
i = 0;
return function(){
data = data.slice();
data.push({
num: ++i,
unit: Math.floor(Math.random()*10),
decade: Math.floor(Math.random()*10),
hundreds: Math.floor(Math.random()*10)
});
return data;
} ;
})();
var store1 = Ext.create('Ext.data.JsonStore', {
fields: ['num', 'unit', 'decade', 'hundreds'],
data: generateData()
});
var initr = setInterval(function(){
var gs = generateData();
var min = numAxis.minimum ,
last = gs[gs.length-1].num,
max = numAxis.maximum,
markeIndex = chart.markerIndex || 0;
if(max < last){
markerIndex =1 ;
numAxis.maximum = last;
numAxis.minimum = min+1;
chart.markerIndex = markerIndex;
}
store1.loadData(gs);
},1000);
var axesRecords =[
{type:"Numeric",fields:['unit', 'decade', 'hundreds'],position:"left",title:"Number of Hits"
,minimum:0,minorTickSteps:1,maximum:9},
{type:"Numeric",fields:["num"],position:"bottom",minimum:1,minorTickSteps:1,maximum:10,
title:"Month of the Year",aggregateOp:"sum",constrain:true,}
]
var seriesRecords = [
{type:"line",xfield:"num",yfield:"unit",axis:"left"},
{type:"line",xfield:"num",yfield:"decade",axis:"left"},
{type:"line",xfield:"num",yfield:"hundreds",axis:"left"}
]
Ext.define("Ext.custom.CustChart",{
//创建坐标轴
createAxes:function(axesRecords){
var axesArr = [];
for(var i = 0; i < axesRecords.length; i++){
var label = axesRecords[i].label?eval("("+axesRecords[i].label+")"):{};
var axis = {
type : axesRecords[i].type,
fields : axesRecords[i].fields,
position : axesRecords[i].position,
title : axesRecords[i].title,
label : label,
grid : axesRecords[i].grid?axesRecords[i].grid:true,
aggregateOp:axesRecords[i].aggregateOp?axesRecords[i].aggregateOp:'',
constrain:axesRecords[i].constrain?axesRecords[i].constrain:false,
maximum : axesRecords[i].maximum?axesRecords[i].maximum:10,
minimum : axesRecords[i].minimum?axesRecords[i].minimum:0,
minorTickSteps : axesRecords[i].minorTickSteps?axesRecords[i].minorTickSteps:1
};
axesArr.push(axis);
}
return axesArr;
},
createSeries:function(seriesRecords){
var seriesArr = [];
for(var i = 0; i < seriesRecords.length; i++){
var ser = {
type : seriesRecords[i].type,
xField : seriesRecords[i].xfield,
yField : seriesRecords[i].yfield,
axis : seriesRecords[i].axis,
smooth : true,
markerConfig: { type: 'circle', size: 4, radius: 4,'stroke-width': 0},
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 win = Ext.create('Ext.window.Window', {
width: 800,
height: 600,
minHeight: 400,
minWidth: 550,
hidden: false,
maximizable: true,
title: 'Column Chart',
autoShow: true,
layout: 'fit',
tbar: [{
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'
});
}
});
}
}, {
text: 'Reload Data',
handler: function() {
store1.loadData(generateData());
}
}],
items: new Ext.custom.CustChart().createChart(axesRecords,seriesRecords)
});
chart = win.child("#chartCmp");
numAxis = chart.axes.get(1);
//store1.loadData(generateData());
});
</script>
</head>
<body>
<!-- 看啥看 -->
<div id = "mydiv"></div>
</body>
</html>
