heightChart 与extjs整合 动态生成历史曲线 和实时曲线
动态生成历史曲线
Ext.onReady(function(){
var dataStr = "{" +
"lineChName:['2011断路器_A项电流','2011断路器_B项电流','2011断路器_C项电流']," +
"time:['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']," +
"data:[" +
"[7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]," +
"[null,4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]," +
"[3,6.2, 0, 3.5, 2.9, 15.2, 7.0, 19.6, 6.2, 8.3, 2.6, 3.8]" +
"]" +
"}";
function getData(dataStr){
var dataObj = Ext.decode(dataStr);
var xAxisArr = dataObj.time;///曲线x轴数据数组
var charDataArr = dataObj.data;//曲线y轴数据数组
var lineChName = dataObj.lineChName;//曲线名称数组
var series = [];//曲线
for(var i=0;i<charDataArr.length;i++){
var tempSerie = {};
tempSerie.name = lineChName[i];
tempSerie.data = charDataArr[i];
series.push(tempSerie);
}
hdrchart.chartConfig.xAxis.categories = xAxisArr;
hdrchart.chartConfig.series = series;
}
var hdrchart = new Ext.ux.HighChart({
titleCollapse: true,
layout:'fit',
border: true,
id: 'hchart',
chartConfig: {
chart: {
// id: 'hchart',
// marginRight: 200,//可选，控制报表位置
// marginBottom: 200,//可选，控制报表位置
defaultSeriesType: 'line'
// margin: [50, 150, 60, 80]
},
title: {
text: '2011断路器 时间：xxxx年yy月zz日 hh:mm:ss 到 xxxx年yy月zz日 hh:mm:ss 电流值',
style: {
// margin: '10px 100px 0 0' // center it
}
},
/* subtitle: {
text: '2011断路器',
style: {
// margin: '0 100px 0 0' // center it
}
},*/
xAxis: {
/* categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],*/
title: {
// text: 'Month'
},
tickInterval: 4//刻度间隔值 就是x轴 4个数据单位 写一个x值
//min: 0,
//max: -1//标签个数-1
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [
{
value: 0,
width: 1,
color: '#808080'
}
]
},
tooltip: {
shared : true,
crosshairs : true
/* formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y +'°C';
}*/
},
legend: {
layout: 'vertical',
style: {
left: 'auto',
bottom: 'auto',
right: '10px',
top: '100px'
}
}/*,
series: [
{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
},{
name: 'London',
data: [ 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}
]*/
}
});
var hdrWin = new Ext.Window({
id:"hdrwin",
title: '历史曲线',
// width:500,
// height:300,
layout:'fit',
closeAction:'hide',
// modal:true,
maximized:true,
items: [
hdrchart
]
});
getData(dataStr);
hdrWin.show();
});
动态生成实时曲线
/**
* 实时曲线模拟程序
*/
Ext.onReady(function(){
//第一次交互数据
var dataStr = "{" +
"lineChName:['2011断路器_A项电流','2011断路器_B项电流','2011断路器_C项电流']," +
// "lineChName:['2011断路器_A项电流']," +
"time:'10:08:44',"+
"data:[1,2,3]"+
"}";
/* //第二次交互数据
var dataStr = "{" +
"time:'10:08:44',"+
"data:[1,2,3]"+
"}";*/
var seriesCount = 0 ;//曲线数量
var series = [];//曲线
function getData(dataStr){
var dataObj = Ext.decode(dataStr);
var xData = timeStrToData(dataObj.time);//x时间轴值
var chartData = dataObj.data;//y轴数据
//第一次交互有lineChName属性
if(dataObj.lineChName){
var lineChName = dataObj.lineChName;//曲线名称数组
seriesCount = lineChName.length;
for(var i=0;i<seriesCount;i++){
var tempSerie = {};
tempSerie.name = lineChName[i];//曲线名称
var initArr = createTempData();
// initArr.push({x:xData,y:chartData[i]});
tempSerie.data = initArr;
series.push(tempSerie);
}
}else{
//第二次交互数据
}
hdrchart.chartConfig.series = series;
}
// 根据时间字符串04:09:34.923，构造时间
function timeStrToData(str){
var pointIndex = str.indexOf('.');
var milliseSec = parseInt(str.substring(pointIndex+1),10);
var tempArr = str.substring(0,pointIndex).split(':');
var dateTime = new Date();
dateTime.setHours(parseInt(tempArr[0],10));
dateTime.setMinutes(parseInt(tempArr[1],10));
dateTime.setSeconds(parseInt(tempArr[2],10));
dateTime.setMilliseconds(milliseSec);
return dateTime;
}
var hdrchart = new Ext.ux.HighChart({
titleCollapse: true,
layout:'fit',
border: true,
id: 'hchart',
chartConfig: {
chart: {
// id: 'hchart',
// marginRight: 200,//可选，控制报表位置
// marginBottom: 200,//可选，控制报表位置
defaultSeriesType: 'spline'
// margin: [50, 150, 60, 80]
},
title: {
text: '2011断路器电流实时曲线',
style: {
// margin: '10px 100px 0 0' // center it
}
},
/* subtitle: {
text: '2011断路器',
style: {
// margin: '0 100px 0 0' // center it
}
},*/
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [
{
value: 0,
width: 1,
color: '#808080'
}
]
},
tooltip: {
shared : true,
crosshairs : true
/* formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y +'°C';
}*/
},
plotOptions: {
series: {
marker: {
enabled: false //隐藏点
}
}
},
legend: {
layout: 'vertical',
style: {
left: 'auto',
bottom: 'auto',
right: '10px',
top: '100px'
}
}/*,
series: [
{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
},{
name: 'London',
data: [ 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}
]*/
}
});
var hdrWin = new Ext.Window({
id:"hdrwin",
title: '实时曲线',
// width:500,
// height:300,
layout:'fit',
closeAction:'hide',
// modal:true,
maximized:true,
items: [
hdrchart
]
});
getData(dataStr);
function createTempData(){
var data = [],
time = (new Date()).getTime(),
i;
for (i = -50; i <= 0; i++) {
data.push({
x: time + i * 1000,
y: 0
});
}
return data;
//hdrchart.chartConfig.series[0].data = data;
}
hdrWin.show();
//第二次交互模拟方法
function createData(){
setInterval(function() {
var x = (new Date()).getTime(), // current time
y = Math.random();
z = Math.random();
k = Math.random();
hdrchart.chart.series[0].addPoint([x, y], true, true);
hdrchart.chart.series[1].addPoint([x, z], true, true);
hdrchart.chart.series[2].addPoint([x, k], true, true);
}, 1000);
}
createData();
});