amcharts _ 2.7.6 实现动态数据展现
老版的amcharts是基于flash的，新版的是javascript实现的，同样amcharts 2.7.6支持页面动态数据展现。
以下是方法：
一、首先去http://amcharts.com/download下载插件包
二、修改amcharts_2.7.6\samples中的实例
以下是area100PercentStacked.html的动态实例，代码如下：
主要添加了：
chartData2变量
reloadData方法
loadStringData方法
手动刷新按钮
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>amCharts examples</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="../amcharts/amcharts.js" type="text/javascript"></script>
<script type="text/javascript">
var chart;
var chartData = [{
year: 1994,
cars: 1587,
motorcycles: 650,
bicycles: 121
}, {
year: 1995,
cars: 1567,
motorcycles: 683,
bicycles: 146
}, {
year: 1996,
cars: 1617,
motorcycles: 691,
bicycles: 138
}, {
year: 1997,
cars: 1630,
motorcycles: 642,
bicycles: 127
}, {
year: 1998,
cars: 1660,
motorcycles: 699,
bicycles: 105
}, {
year: 1999,
cars: 1683,
motorcycles: 721,
bicycles: 109
}, {
year: 2000,
cars: 1691,
motorcycles: 737,
bicycles: 112
}, {
year: 2001,
cars: 1298,
motorcycles: 680,
bicycles: 101
}, {
year: 2002,
cars: 1275,
motorcycles: 664,
bicycles: 97
}, {
year: 2003,
cars: 1246,
motorcycles: 648,
bicycles: 93
}, {
year: 2004,
cars: 1218,
motorcycles: 637,
bicycles: 101
}, {
year: 2005,
cars: 1213,
motorcycles: 633,
bicycles: 87
}, {
year: 2006,
cars: 1199,
motorcycles: 621,
bicycles: 79
}, {
year: 2007,
cars: 1110,
motorcycles: 210,
bicycles: 81
}, {
year: 2008,
cars: 1165,
motorcycles: 232,
bicycles: 75
}, {
year: 2009,
cars: 1145,
motorcycles: 219,
bicycles: 88
}, {
year: 2010,
cars: 1163,
motorcycles: 201,
bicycles: 82
}, {
year: 2011,
cars: 1180,
motorcycles: 285,
bicycles: 87
}, {
year: 2012,
cars: 1159,
motorcycles: 277,
bicycles: 71
}];
var chartData2 = [{
year: 1995,
cars: 1567,
motorcycles: 683,
bicycles: 146
}, {
year: 1996,
cars: 1617,
motorcycles: 691,
bicycles: 138
}, {
year: 1997,
cars: 1630,
motorcycles: 642,
bicycles: 127
}, {
year: 1998,
cars: 1660,
motorcycles: 699,
bicycles: 105
}, {
year: 1999,
cars: 1683,
motorcycles: 721,
bicycles: 109
}, {
year: 2000,
cars: 1691,
motorcycles: 737,
bicycles: 112
}, {
year: 2001,
cars: 1298,
motorcycles: 680,
bicycles: 101
}, {
year: 2002,
cars: 1275,
motorcycles: 664,
bicycles: 97
}, {
year: 2003,
cars: 1246,
motorcycles: 648,
bicycles: 93
}, {
year: 2004,
cars: 1218,
motorcycles: 637,
bicycles: 101
}, {
year: 2005,
cars: 1213,
motorcycles: 633,
bicycles: 87
}, {
year: 2006,
cars: 1199,
motorcycles: 621,
bicycles: 79
}, {
year: 2007,
cars: 1110,
motorcycles: 210,
bicycles: 81
}, {
year: 2008,
cars: 1165,
motorcycles: 232,
bicycles: 75
}, {
year: 2009,
cars: 1145,
motorcycles: 219,
bicycles: 88
}, {
year: 2010,
cars: 1163,
motorcycles: 201,
bicycles: 82
}, {
year: 2011,
cars: 1180,
motorcycles: 285,
bicycles: 87
}, {
year: 2012,
cars: 1159,
motorcycles: 277,
bicycles: 71
}, {
year: 2013,
cars: 1259,
motorcycles: 377,
bicycles: 91
}];
AmCharts.ready(function () {
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.pathToImages = "../amcharts/images/";
chart.zoomOutButton = {
backgroundColor: "#000000",
backgroundAlpha: 0.15
};
chart.dataProvider = chartData;
chart.categoryField = "year";
chart.addTitle("Traffic incidents per year", 15);
// AXES
// Category
var categoryAxis = chart.categoryAxis;
categoryAxis.gridAlpha = 0.07;
categoryAxis.axisColor = "#DADADA";
categoryAxis.startOnAxis = true;
// Value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.title = "percent"; // this line makes the chart "stacked"
valueAxis.stackType = "100%";
valueAxis.gridAlpha = 0.07;
chart.addValueAxis(valueAxis);
// GRAPHS
// first graph
var graph = new AmCharts.AmGraph();
graph.type = "line"; // it's simple line graph
graph.title = "Cars";
graph.valueField = "cars";
graph.balloonText = "[[value]] ([[percents]]%)";
graph.lineAlpha = 0;
graph.fillAlphas = 0.6; // setting fillAlphas to > 0 value makes it area graph
chart.addGraph(graph);
// second graph
var graph = new AmCharts.AmGraph();
graph.type = "line";
graph.title = "Motorcycles";
graph.valueField = "motorcycles";
graph.balloonText = "[[value]] ([[percents]]%)";
graph.lineAlpha = 0;
graph.fillAlphas = 0.6;
chart.addGraph(graph);
// third graph
var graph = new AmCharts.AmGraph();
graph.type = "line";
graph.title = "Bicycles";
graph.valueField = "bicycles";
graph.balloonText = "[[value]] ([[percents]]%)";
graph.lineAlpha = 0;
graph.fillAlphas = 0.6;
chart.addGraph(graph);
// LEGEND
var legend = new AmCharts.AmLegend();
legend.align = "center";
chart.addLegend(legend);
// CURSOR
var chartCursor = new AmCharts.ChartCursor();
chartCursor.zoomable = false; // as the chart displayes not too many values, we disabled zooming
chartCursor.cursorAlpha = 0;
chart.addChartCursor(chartCursor);
// WRITE
chart.write("chartdiv");
});
//刷新事件
function reloadData(url) {
var dynamicData = loadStringData(url);
//fileSystemChart.dataProvider = eval('(' + dynamicData + ')');//如果ajax获取得来的数据含有引号，需要eval()函数处理一下
chart.dataProvider = dynamicData;
chart.validateNow();
chart.validateData();
}
//ajax请求
function loadStringData(link) {
return chartData2;
/* 下面的是ajax请求，可以从服务器获取动态数据
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari
var request = new XMLHttpRequest();
}
else {
// code for IE6, IE5
var request = new ActiveXObject('Microsoft.XMLHTTP');
}
// load
request.open('GET', link, false);
request.send();
return request.responseText;
*/
}
window.setInterval("reloadData('')", 5000);//五秒刷新
</script> </head> <body> <div id="chartdiv" style="width:100%; height:400px;"></div> <input type="button" value="手动刷新" onclick="reloadData('')"/>
</body>
</html>
三、定时器
可以添加定时器，调用ajax定时刷新页面数据
window.setInterval("reloadData('')", 5000);//五秒刷新
四、破解插件
去掉左上角文字链接
注释amcharts_2.7.6\amcharts\amcharts.js\amcharts.js的一段代码即可(如果不好找，可以用myeclipse格式化一下)，看以下截图：
五、此插件可配合Sigar展示服务器CPU、内存、磁盘、流量等数据
http://blog.csdn.net/aoxida/article/details/8080492