您的位置：首页 > 其它

amcharts _ 2.7.6 实现动态数据展现

2012-10-25 09:50 190 查看
老版的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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航