Ext 오프셋 그림 LiveAnimated
<!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>이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
ExtJS 3.2 학습 노트(3) 사용자 정의 이벤트Extjs에서 모든 상속은 Ext.util에서 합니다.Observable 클래스의 컨트롤은 이벤트를 지원할 수 있습니다. 클래스에 대해 이벤트를 사용자 정의하려면 다음 절차를 따르십시오. 1, 먼저 클래스를 정의합니...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
