amcharts _ 2.7.6 实现动态数据展现
来源：互联网 发布：起点传奇数据库编辑器 编辑：程序博客网 时间：2024/06/06 09:09
老版的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
- amcharts _ 2.7.6 实现动态数据展现
- amcharts _ 2.7.6 实现动态数据展现
- amcharts动态生成数据
- Amcharts 实现动态曲线图
- 数据展现
- 用amcharts动态生成柱状图
- amCharts
- Nginx+Lua+MySQL/Redis实现高性能动态网页展现
- c#实现amcharts图片导出
- 用.net+amcharts实现企业数据趋势分析的详细设计
- 【学习摘记】马士兵bbs初级版_课时5_数据的初步展现
- 数据分析-数据展现
- 用xml配置实现定制查询与数据分析展现
- 用xml配置实现数据展现（定制查询）
- 数据以报表形式展现的实现方法研究
- 数据以报表形式展现的实现方法研究
- 原生JS实现table数据，转化为EXCEL表格展现
- 用amcharts动态生成饼图
- 你还在用notifyDataSetChanged？ 你已经out了
- 数据结构-链栈
- 为什么插入数据普通PC比服务器更快？
- Eclipse快捷键 10个最有用的快捷键
- win7(64)未在本地计算机上注册 Microsoft.Jet.OLEDB.4.0 提供程序
- amcharts _ 2.7.6 实现动态数据展现
- 元芳体走红并非简单恶搞 体现了公众渴望表达的欲望
- 数据结构栈操作
- Windows Hook机制
- 多线程断点续传后台下载
- Mysql启动停止
- photoshop不自动刷新的问题
- 数据结构-队列操作
- SQLServer和Oracle的常用函数对比
