在这一年中,从毕业到工作,这段事件也刚刚好一年了,在一年中里面,也见识了很多,了解了很多,长话短说;
我把从过年回来到现在这半个月的时间技术总结一下,因为我过年回来的比较晚,所以被借调到别的部门进行开发,在这段开发的时间里面,我主要负责前台,前台主要用到技术是jquery eazyui,还有一个是amcharts
我先总结一下amcharts,我了解amcharts是从官网下载它的API和在网上找资料一下是他的代码部分;
//折线图
$.ajax({
url: 'analysisController.do?analysis',
type: 'POST',
data:{type:"xdjqynt"},
dataType: 'json',
timeout: 3000,
complete : function(XMLHttpRequest,status){ //请求完成后最终执行参数
if(status=='timeout'){//超时,status还有success,error等值的情况
ajaxTimeoutTest.abort();
alert("超时");
}
},
success: function(result){
if(result.isSuccess){
chartData = result.obj;
xdjqyntChart(chartData);
}
}
});
function xdjqyntChart(chartData){
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData;
chart.categoryField = "year"; //横坐标年份
chart.startDuration = 0.5;
chart.balloon.color = "#000000";
// AXES
// category
var categoryAxis = chart.categoryAxis;//创建一个折线图
categoryAxis.fillAlpha = 1;
categoryAxis.fillColor = "#FAFAFA"; //填充颜色
categoryAxis.gridAlpha = 0;
categoryAxis.axisAlpha = 0;
categoryAxis.gridPosition = "start";
//categoryAxis.position = "top";
// value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.title = "企业数(户)";
valueAxis.dashLength = 5;
valueAxis.axisAlpha = 0;
valueAxis.minimum = 1;
valueAxis.maximum =1000;
valueAxis.integersOnly = true;
valueAxis.gridCount = 10;
valueAxis.reversed = false; // this line makes the value axis reversed
chart.addValueAxis(valueAxis);
// GRAPHS
// Italy graph
var graph = new AmCharts.AmGraph();
graph.title = "Italy";
graph.valueField = "italy";
graph.hidden = true; // this line makes the graph initially hidden
graph.balloonText = "place taken by Italy in [[category]]: [[value]]";
graph.lineAlpha = 1;
graph.bullet = "round";
//chart.addGraph(graph);
// Germany graph
var graph = new AmCharts.AmGraph();
graph.title = "Germany";
graph.valueField = "germany";
graph.balloonText = "place taken by Germany in [[category]]: [[value]]";
graph.bullet = "round";
//chart.addGraph(graph);
// United Kingdom graph
var graph = new AmCharts.AmGraph();
graph.title = "年度新登记企业";
graph.valueField = "total"; //纵坐标
graph.balloonText = "[[category]]年新登记的企业数为: [[value]]户"; //当鼠标移到折线上面显示出来的数据
graph.bullet = "round";
chart.addGraph(graph);
// CURSOR
var chartCursor = new AmCharts.ChartCursor();
chartCursor.cursorPosition = "mouse";
chartCursor.zoomable = false;
chartCursor.cursorAlpha = 0;
chart.addChartCursor(chartCursor);
// LEGEND
var legend = new AmCharts.AmLegend();
legend.useGraphSettings = true;
chart.addLegend(legend);
// WRITE
chart.write("chartdiv02");
}
//柱状图
$.ajax({
url: 'analysisController.do?analysis',
type: 'POST',
data:{type:"cyqy"},
dataType: 'json',
timeout: 3000,
complete : function(XMLHttpRequest,status){ //请求完成后最终执行参数
if(status=='timeout'){//超时,status还有success,error等值的情况
ajaxTimeoutTest.abort();
alert("超时");
}
},
success: function(result){
if(result.isSuccess){
chartData = result.obj;
hyfb(chartData);
}
}
});
function hyfb(chartData){
var chart = AmCharts.makeChart("chartdiv02", {
type: "serial",
dataProvider: chartData,
categoryField: "codename",
pathToImages:"amcharts/images/",
depth3D: 20,
angle: 30,
categoryAxis: {
labelRotation: 40,
autoGridCount:false,
gridCount:chartData.length,
gridPosition: "start"
},
valueAxes: [{
title: "企业数(户)"
}],
graphs: [{
valueField: "count(*)",
colorField: "color",
type: "column",
balloonText:"[[category]]: <b>[[value]]</b>",
lineAlpha: 1,
fillAlphas: 1
}],
chartCursor: {
cursorAlpha: 0,
zoomable: false,
categoryBalloonEnabled: false
},
amExport: {
top: 21,
right: 21,
buttonColor: '#EFEFEF',
buttonRollOverColor:'#DDDDDD',
exportPNG:true,
exportJPG:true,
exportPDF:true,
exportSVG:true
}
});
}
如果柱状图横坐标的参数过多可以在categoryAxis加上 这两个属性 autoGridCount:false, gridCount:chartData.length
jquery eazyUI
combobox下拉框联动:
var _parentInduId=$("#pagePage4_parentInduId").combobox({
disabled: false,
url: 'creditRatingController.do?getAllIndustry',
valueField: 'code',
textField: 'codename'
});
var _bumen = $('#pagePage4_bumen').combobox({
url: 'creditRatingController.do?getAllDepartment',
editable: false,
valueField: 'nid',
textField: 'depName',
onSelect: function (record) {
_table.combobox({
disabled: false,
url: 'creditRatingController.do?getAllTable&deptId=' + record.nid,
valueField: 'TABLE_NAME',
textField: 'COMMENTS',
onSelect: function (record) {
_filed.combobox({
disabled: false,
url: 'creditRatingController.do?getAllField&tableName=' + record.TABLE_NAME,
valueField: 'COLUMN_NAME',
textField: 'COLUMN_NAME'
});
}
});
}
});
var _table = $('#pagePage4_table').combobox({
disabled: true,
valueField: 'TABLE_NAME',
textField: 'COMMENTS'
});
var _filed= $('#pagePage4_filed').combobox({
disabled: true,
valueField: 'COLUMN_NAME',
textField: 'COLUMN_NAME'
});
这个下拉框联动请求后台返回前台一个JSON字符串,当选择一个下拉框里面的值时触发第二个下拉框,第二个下拉框相应的根据一个传回来的Id,到后台去找相应的方法,返回来的值就是第二个下拉框的值,一次类推;
下拉框绑定事件
$('#pagePage3_dataItemName').combobox('textbox').bind('focus',function(){
});