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方法
手动刷新按钮
三、定时器
可以添加定时器,调用ajax定时刷新页面数据
window.setInterval("reloadData('')", 5000);//五秒刷新
四、破解插件
去掉左上角文字链接
![](http://img.my.csdn.net/uploads/201210/25/1351130799_8396.gif)
注释amcharts_2.7.6\amcharts\amcharts.js\amcharts.js的一段代码即可(如果不好找,可以用myeclipse格式化一下),看以下截图:
![](http://img.my.csdn.net/uploads/201210/25/1351130815_4961.gif)
五、此插件可配合Sigar展示服务器CPU、内存、磁盘、流量等数据
http://blog.csdn.net/aoxida/article/details/8080492
以下是方法:
一、首先去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);//五秒刷新
四、破解插件
去掉左上角文字链接
![](http://img.my.csdn.net/uploads/201210/25/1351130799_8396.gif)
注释amcharts_2.7.6\amcharts\amcharts.js\amcharts.js的一段代码即可(如果不好找,可以用myeclipse格式化一下),看以下截图:
![](http://img.my.csdn.net/uploads/201210/25/1351130815_4961.gif)
五、此插件可配合Sigar展示服务器CPU、内存、磁盘、流量等数据
http://blog.csdn.net/aoxida/article/details/8080492
相关文章推荐
- amcharts _ 2.7.6 实现动态数据展现
- Ajax获取数据动态树形节点实现
- jQuery实现动态显示select下拉列表数据的方法
- [原创]Silverlight中动态数据验证和动态自动计算的Reflection反射实现
- thinkphp+ajax 移动端实现滚动到底部加载数据(无刷新动态加载数据技术的应用)
- jquery mobile关于使用iscroll动态加载数据实现下拉刷新和上拉的效果
- 应用jQuery实现表格数据的动态添加与统计
- Matlab使用Plot函数实现数据动态显示方法总结
- ExpandableListView 实现点击某个group的时候再去请求网络动态加载子视图中的数据
- 【数据结构作业】实现任意三种静态或动态查找
- listView实现数据动态添加(数据与UI分离)
- 关于dorado框架datatable处的右键菜单无法根据具体数据实现动态分别显示不同菜单的解决方法
- Vue实现动态创建和删除数据
- Hibernate中通过FetchProfile的方式实现动态数据获取
- 基于ArcGIS Server的ADF的异步回调机制实现基于动态数据显示问题
- C#+JQuery+.Ashx+百度Echarts实现全国省市地图和饼状图动态数据图形报表的统计
- 利用override多态原理实现对相似页面的后台代码的抽象,并实现动态GridView动态列数据绑定
- 数据结构之动态栈的java简单实现
- DATAGRIDVIEW动态筛选数据,实现编辑之后,点击按钮更新,及删除选中的列到数据库。