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 CHARTchart = 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// Categoryvar categoryAxis = chart.categoryAxis;categoryAxis.gridAlpha = 0.07;categoryAxis.axisColor = "#DADADA";categoryAxis.startOnAxis = true;// Valuevar 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 graphvar graph = new AmCharts.AmGraph();graph.type = "line"; // it's simple line graphgraph.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 graphvar 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 graphvar 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);// LEGENDvar legend = new AmCharts.AmLegend();legend.align = "center";chart.addLegend(legend);// CURSORvar chartCursor = new AmCharts.ChartCursor();chartCursor.zoomable = false; // as the chart displayes not too many values, we disabled zoomingchartCursor.cursorAlpha = 0;chart.addChartCursor(chartCursor);// WRITEchart.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, Safarivar request = new XMLHttpRequest();}else {// code for IE6, IE5var request = new ActiveXObject('Microsoft.XMLHTTP');}// loadrequest.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="手动刷新" οnclick="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 实现动态数据展现相关推荐

阿里云白皮书_奥雅纳携手阿里云研究中心发布《动态数据增强未来城市设计倡议》白皮书...
全球TMT2020年9月17日,奥雅纳携手阿里云研究中心于"云栖大会"上联合发布<动态数据增强未来城市设计倡议>白皮书,探讨城市规划和设计行业如何利用数字技术锐意革新, ...
azure云数据库_在Azure SQL数据库中实现动态数据屏蔽
azure云数据库 In this article, we will review Dynamic Data Masking in the Azure SQL database. Dynamic Da ...
chartjs 动态数据_使用ChartJS构建动态仪表板
chartjs 动态数据今天,我们将通过ChartJS的功能使用实时图表创建一个动态仪表板. ChartJS是一个功能强大的,无依赖项JavaScript库,可通过canvas元素构建图形. 最重要 ...
python抓取网页信息_python抓取网页中的动态数据
一.概念网页中的许多数据并不是写死在HTML中的,而是通过js动态载入的.所以也就引出了什么是动态数据的概念,动态数据在这里指的是网页中由Javascript动态生成的页面内容,是在页面加载到浏览器 ...
初创公司怎么做销售数据分析_初创公司与Faang公司的数据科学
初创公司怎么做销售数据分析介绍 (Introduction) In an increasingly technological world, data scientist and analyst r ...
使用动态数据进行数据分页
目录介绍动态数据数据分页填充数据源页面切换结论下载资料库介绍如果您有一个大的数据集合,那么用集合中的所有数据填充项目控件就变得不切实际,更不用说用户不友好了.最好的方法是对数据进行分 ...
爬虫-豆瓣top250，东方财富网动态数据
~满满干货分享一.豆瓣top250爬取过程 (学习视频:Python爬虫编程基础5天速成(2021全新合集)Python入门+数据分析_哔哩哔哩_bilibili) 1.爬取网页 def askUR ...
Keras用动态数据生成器(DataGenerator)和fitgenerator动态训练模型
有了这个生成器,我们就可以用fit_generator 方法进行训练,格式套路如下: model.fit_generator(generator, steps_per_epoch=..., epoch ...
C#应用NPOI实现导出EXcel表格中插入饼状图（可实现动态数据生成）
一.思路: 1.excel是可以通过NPOI插入图片的: 2.C#通过NPOI生成饼状图: 3.把生成的饼状图以字节流的形式插入到表格二.看代码: #region 生成饼图图例/// <s ...

amcharts _ 2.7.6 实现动态数据展现

amcharts _ 2.7.6 实现动态数据展现相关推荐

最新文章

热门文章