var chart;
var datetime = Ext.Date.format(Ext.getCmp('starttimeid').getValue(), 'Y年m月d日 H点m分'); // 开始时间 因为有条件查询
var datetime1 = Ext.Date.format(Ext.getCmp('endtimeid').getValue(), 'Y年m月d日 H点m分');结束时间
var gridas = Ext.getCmp('hispointone'); //获取选中的 复选框
var rowsas = gridas.getSelectionModel().getSelection();
var pointidss = rowsa[0].data.id; //获取选中的复选框的 id
Ext.Ajax.request({
url: 'point/curveData.shtml',
params: {
id: pointidss, //将值传送的后台
starttime: datetime,
endtime: datetime1
},
sync: true,
var hisdata1 = [];
if (chartData1 !== null && chartData1.length > 0) {
for (var aa = 0; aa < chartData1.length; aa++) {
hisdata1.push({
datatime1: new Date(chartData1[aa].datatime1), //返回的时间
dvalue: chartData1[aa].dvalue, //数据
})
}
}
chart1 = new AmCharts.AmSerialChart();
chart1.pathToImages = "resources/images/image/";
chart1.dataProvider = hisdata1; //循环获取的数据 数据
chart1.color = "#00BB00";
chart1.plotAreaBorderColor = "#00BB00";
chart1.categoryField = "datatime1"; // x轴需要的 时间
var categoryAxis1 = chart1.categoryAxis;
categoryAxis1.gridAlpha = 0.15;
categoryAxis1.axisColor = "#0000C6";
categoryAxis1.gridColor = "#0000C6";
categoryAxis1.parseDates = true;
categoryAxis1.minPeriod = "ss";
categoryAxis1.boldPeriodBeginning = true;
categoryAxis1.dateFormats = [{ //展示的 时间区间
period: 'fff',
format: 'JJ:NN:SS'
}, {
period: 'ss',
format: 'JJ:NN:SS'
}, {
period: 'mm',
format: 'JJ:NN'
}, {
period: 'hh',
format: 'JJ:NN'
}, {
period: 'DD',
format: 'DD'
}, {
period: 'WW',
format: 'DD'
}, {
period: 'MM',
format: 'MMM'
}, {
period: 'YYYY',
format: 'YYYY'
}];
var valueAxis1 = new AmCharts.ValueAxis();//样式
valueAxis1.axisColor = "#0000C6";
valueAxis1.gridColor = "#0000C6";
valueAxis1.precision = 1;
valueAxis1.autoGridCount = false;
chart1.addValueAxis(valueAxis1);
var chartCursor1 = new AmCharts.ChartCursor();
chartCursor1.categoryBalloonDateFormat = "MM-DD JJ:NN:SS"; //鼠标放到折线图 时间展示格式
chartCursor1.valueLineEnabled = true;
chartCursor1.valueLineBalloonEnabled = true;
chartCursor1.pan = false;
chartCursor1.zoomable = true;
chart1.addChartCursor(chartCursor1);
var graphh1 = new AmCharts.AmGraph();
graphh1.title = "历史值";
graphh1.valueField = "dvalue";
graphh1.balloonText = "<b><span style='font-size:14px;'>历史值:[[dvalue]]</span></b>"; //获取的数据
graphh1.lineColor = "#33CC00";
chart1.addGraph(graphh1);
var legend1 = new AmCharts.AmLegend();
legend1.valueAlign = "left";
legend1.useMarkerColorForLabels = true;
legend1.useMarkerColorForValues = true;
legend1.useGraphSettings = true;
chart1.addLegend(legend1);
chart1.write("avchischartdiv"); 定义div 获取divid 生成折线图
},
failure: function () {
Ext.Msg.alert('曲线', '获取历史数据异常');
}
});
var datetime = Ext.Date.format(Ext.getCmp('starttimeid').getValue(), 'Y年m月d日 H点m分'); // 开始时间 因为有条件查询
var datetime1 = Ext.Date.format(Ext.getCmp('endtimeid').getValue(), 'Y年m月d日 H点m分');结束时间
var gridas = Ext.getCmp('hispointone'); //获取选中的 复选框
var rowsas = gridas.getSelectionModel().getSelection();
var pointidss = rowsa[0].data.id; //获取选中的复选框的 id
Ext.Ajax.request({
url: 'point/curveData.shtml',
params: {
id: pointidss, //将值传送的后台
starttime: datetime,
endtime: datetime1
},
sync: true,
success: function (response) {
var chartData1 = Ext.decode(response.responseText); //获取查询回来的数据var hisdata1 = [];
if (chartData1 !== null && chartData1.length > 0) {
for (var aa = 0; aa < chartData1.length; aa++) {
hisdata1.push({
datatime1: new Date(chartData1[aa].datatime1), //返回的时间
dvalue: chartData1[aa].dvalue, //数据
})
}
}
chart1 = new AmCharts.AmSerialChart();
chart1.pathToImages = "resources/images/image/";
chart1.dataProvider = hisdata1; //循环获取的数据 数据
chart1.color = "#00BB00";
chart1.plotAreaBorderColor = "#00BB00";
chart1.categoryField = "datatime1"; // x轴需要的 时间
var categoryAxis1 = chart1.categoryAxis;
categoryAxis1.gridAlpha = 0.15;
categoryAxis1.axisColor = "#0000C6";
categoryAxis1.gridColor = "#0000C6";
categoryAxis1.parseDates = true;
categoryAxis1.minPeriod = "ss";
categoryAxis1.boldPeriodBeginning = true;
categoryAxis1.dateFormats = [{ //展示的 时间区间
period: 'fff',
format: 'JJ:NN:SS'
}, {
period: 'ss',
format: 'JJ:NN:SS'
}, {
period: 'mm',
format: 'JJ:NN'
}, {
period: 'hh',
format: 'JJ:NN'
}, {
period: 'DD',
format: 'DD'
}, {
period: 'WW',
format: 'DD'
}, {
period: 'MM',
format: 'MMM'
}, {
period: 'YYYY',
format: 'YYYY'
}];
var valueAxis1 = new AmCharts.ValueAxis();//样式
valueAxis1.axisColor = "#0000C6";
valueAxis1.gridColor = "#0000C6";
valueAxis1.precision = 1;
valueAxis1.autoGridCount = false;
chart1.addValueAxis(valueAxis1);
var chartCursor1 = new AmCharts.ChartCursor();
chartCursor1.categoryBalloonDateFormat = "MM-DD JJ:NN:SS"; //鼠标放到折线图 时间展示格式
chartCursor1.valueLineEnabled = true;
chartCursor1.valueLineBalloonEnabled = true;
chartCursor1.pan = false;
chartCursor1.zoomable = true;
chart1.addChartCursor(chartCursor1);
var graphh1 = new AmCharts.AmGraph();
graphh1.title = "历史值";
graphh1.valueField = "dvalue";
graphh1.balloonText = "<b><span style='font-size:14px;'>历史值:[[dvalue]]</span></b>"; //获取的数据
graphh1.lineColor = "#33CC00";
chart1.addGraph(graphh1);
var legend1 = new AmCharts.AmLegend();
legend1.valueAlign = "left";
legend1.useMarkerColorForLabels = true;
legend1.useMarkerColorForValues = true;
legend1.useGraphSettings = true;
chart1.addLegend(legend1);
chart1.write("avchischartdiv"); 定义div 获取divid 生成折线图
},
failure: function () {
Ext.Msg.alert('曲线', '获取历史数据异常');
}
});
效果如下