9、 动态图表示例
1、需要在html页面增加一个div，同时设置div的id和样式，amcharts将图表显示在指定的id的div中
<div id="chartdiv" style="width: 50%; height: 300px"></div>
2、引用amcharts js 库和css样式
<scriptsrc="amcharts/amcharts.js"type="text/javascript"></script>
<linkrel="stylesheet"href="style.css"type="text/css">
3、设定一个定时器，循环调用函数
window.setInterval(show,2000);//每隔2秒调用一次show（）方法，show方法完成绘图功能
function show(){
var chart = new AmCharts.AmSerialChart();
var valueAxis1 = new AmCharts.ValueAxis();
var graph1 = new AmCharts.AmGraph();
var categoryAxis = chart.categoryAxis;
var guide = new AmCharts.Guide();
var legend = new AmCharts.AmLegend();
var chartCursor = new AmCharts.ChartCursor();
//设定最大显示数值个数
generateChartData();
chart.pathToImages = "amcharts/images/";
chart.zoomOutButton = {
backgroundColor: '#000000',
backgroundAlpha: 0.15
};
chart.dataProvider = chartData;
chart.categoryField = "date";
categoryAxis.parseDates = false; // as our data is date-based, we set parseDates to true
categoryAxis.dashLength = 1;
categoryAxis.gridAlpha = 0.15;
categoryAxis.axisColor = "#DADADA";
// categoryAxis.position = "top";
categoryAxis.gridPosition = "start";
categoryAxis.startOnAxis = true;
categoryAxis.gridColor = "#FFFFFF";
// CURSOR
chartCursor.zoomable = false; // as the chart displayes not too many values, we disabled zooming
chartCursor.cursorAlpha = 0;
chartCursor.cursorPosition = "mouse";
chartCursor.pan = true; // set it to fals if you want the cursor to work in "select" mode
chart.addChartCursor(chartCursor);
valueAxis1.axisColor = "#FF6600";
valueAxis1.axisThickness = 1;
valueAxis1.gridAlpha = 0;
valueAxis1.tickLength =0;
valueAxis1.minimum = -100;
valueAxis1.maximum = 100;
valueAxis1.title="哈哈";
valueAxis1.logarithmic = false; // this line makes axis logarithmic
valueAxis1.integersOnly = true;
valueAxis1.gridCount = 10;
valueAxis1.unit = "%";
valueAxis1.labelsEnabled = true;
valueAxis1.inside = true;
valueAxis1.position = "left";
chart.addValueAxis(valueAxis1);
// LEGEND
legend.align = "center";
legend.marginLeft = 0;
legend.title="测试";
legend.horizontalGap = 10;
legend.equalWidths = false;
legend.valueWidth = 120;
chart.addLegend(legend);
guide.fillAlpha = 0.1;
guide.lineAlpha = 0;
guide.value = 50;
guide.toValue = 0;
guide.lineColor = "#CC0000";
guide.dashLength = 4;
guide.label = "平均值";
guide.inside = true;
guide.lineAlpha = 1;
var guide1 = new AmCharts.Guide();
guide1.lineColor = "#CC0000";
guide1.lineAlpha = 1;
guide1.dashLength = 2;
guide1.inside = true;
guide1.labelRotation = 90;
categoryAxis.addGuide(guide1);
valueAxis1.addGuide(guide);
graph1.valueAxis = valueAxis1; // we have to indicate which value axis should be used
graph1.title = "红色";
graph1.valueField = "visits";
graph1.bullet = "round";
graph1.dashLength = 0;
graph1.hideBulletsCount = 10;
graph1.balloonText = "[[date]] ([[visits]])";
graph1.lineColor = "#d1655d";
graph1.connect = false;
graph1.negativeLineColor = "#efcc26";
graph1.bulletBorderColor = "#FFFFFF";
graph1.bulletBorderThickness = 2;
graph1.type = "smoothedLine"; // this line makes the graph smoothed line.
graph1.fillAlphas = 0.3; // setting fillAlphas to > 0 value makes it area graph
chart.addGraph(graph1);
chart.addTitle("测试动态报表图", 5);
chart.plotAreaBorderColor = "#000000";
chart.plotAreaBorderAlpha = 5;
chart.autoMargins = true;
chart.fontSize = 14;
chart.write('chartdiv');
chart=null;
valueAxis1 = null;
graph1 = null;
categoryAxis = null;
guide = null;
legend = null;
}
function generateChartData() {
$.ajax({
type : "get",
url : "${pageContext.request.contextPath}/getData",
dataType : "text",
data : {
},
success : function(result) {
parseData(result,20);
},
error : function(XMLHttpRequest, textStatus, errorThrown) {
alert("请求异常，请检查服务器是否正常运行！" + XMLHttpRequest.status + " "
+ XMLHttpRequest.readyState + " " + textStatus);
}
});
}
function parseData(data,num){
var tempDate = [];
tempDate = data.split(" ");
chartData.push({
date:tempDate[0],
visits:tempDate[1]
});
var newChartData=[];
var len=chartData.length;
if(len>num){
for(var m=0;m<num;m++){
newChartData[m]=chartData[len-num+m];
}
chartData = newChartData;
newChartData=null;
}
len=null;
visits=null;
}
4、写一个servlet程序，给amcharts提供动态数据
publicclass DataProviderServlet extends HttpServlet {
privatestaticfinallongserialVersionUID = 1L;
publicstatic Integer i=0;
public DataProviderServlet() {
super();
}
protectedvoid doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
StringBuilder sb = new StringBuilder();
sb.append(i++).append(" ").append(new Random().nextInt(100)*(i%2==0?(-1):(1)));
System.out.println(sb.toString());
response.getWriter().write(sb.toString());
}
protectedvoid doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
网友评论