amcharts 折线图
来源:互联网 发布:matlab编程第二版购买 编辑:程序博客网 时间:2024/05/21 22:28
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('曲线', '获取历史数据异常');
}
});
效果如下
阅读全文
1 0
- amcharts 折线图
- 用amcharts动态产生折线图
- 使用amCharts绘制统计图表(柱状图、折线图、3D图)
- 使用amCharts工具做报表的小记 flash报表 饼图 柱状图 折线图
- 使用amCharts工具做报表的小记 flash报表 饼图 柱状图 折线图
- amCharts
- 用amcharts动态生成饼图
- 折线图
- 折线图
- 折线图
- 折线图
- 折线图
- 折线图
- 折线图(一)绘制折线图坐标轴
- 折线图 自定义折线图 自定义view
- 安卓折线图折线图charts
- Highcharts折线图折线不显示
- echarts折线图更改折线点类型
- hdu 6055 Regular polygon
- Spring的BeanDefinition和InstantionStratety和BeanWapper
- 基于flask与tk的网络粘贴板
- Unity Attribute
- Vue.js使用pdfMake时出现字体找不到错误
- amcharts 折线图
- 文本框限制输入数字或者字母等。
- python下stl格式转换off格式
- android studio断点调试
- python学习(四)----文件相关方法
- ADF taskflow用法
- svn软件登录报错
- 简单的TCP server编写
- 使用目录树/文件名时的紧凑bash提示