amcharts _ 2.7.6 实现动态数据展现

最新推荐文章于 2022-11-18 21:26:27 发布
最新推荐文章于 2022-11-18 21:26:27 发布
阅读量1.7w 收藏 6
点赞数 2
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aoxida/article/details/8109335
版权

老版的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="手动刷新" ο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


aoxida
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
AmChart中文API
04-28
AmChart的实例帮助文档 amcharts 要一个“配置文件”（setting.xml），一个数据文件(amile_data.xml)， 一个 SWFObject.js，一个对应的 SWF 就可以生成漂亮的统计报表了 1 SWFObject v1.5的对象结构 view plaincopy to clipboardprint? deconcept util getRequestParameter(_2b) // 取得url参数value。_2b是URL的key。 SWFObjectUtil getPlayerVersion() // 取得版本号对象。major.minor.rev。 cleanupSWFs() // 清除页面上所有元素。 SWFObject(_1, id, w, h, _5, c, _7, _8, _9, _a) // _1: swf，指定SWF文件路径。 // _id: id，或者标签的id。 // w: width，属性width。 // h: height，属性height。 // _5: version，flash版本，默认自动会去读取本地的flash插件版本的。 // c: bgcolor，背景色。 // _7: quality，品质(low, high, autolow, autohigh, best ) 。 // _8: xiRedirectUrl // _9: redirectUrl // _a: url参数key useExpressInstall(_d) // 设置xiSWFPath, useExpressInstall属性 setAttribute(_e, _f) // 设置属性attributes。_e是key，_f是value。 getAttribute(_10)http://www.wendangxiazai.com/b-6b9b1bbcf121dd36a32d82c6.html // 取得属性attributes中的值。_10是key。 addParam(_l1, _l2) // 设置参数params。_l1是key，_l2是value。 getParams() // 取得params。 addVariable(_l3, _l4) // 设置变量variables。_13是key，_14是value。 getVariable(_l5) // 取得变量variables中的值。 getVariables() // 取得变量variables。 getVariablePairs() // 取得变量variables的key=value对数组。 getSWFHTML() // 返回flash嵌入的HTML // 例如： // // src="/amchart/amchart/amcolumn/amcolumn.swf" mce_src="amchart/amchart/amcolumn/amcolumn.swf" // width="520" height="380" // style="undefined" mce_style="undefined" // id="amcolumn" name="amcolumn" // bgcolor="#FFFFFF" // quality="high" // flashvars="path=/amchar/amchar/amcolumn/&settings_file=amcolumn_settings.xml&data_file=amcolumn_data.txt&preloader_color=#000000"/> write(_20) // 写入flash插入的位置。_20可以是id的名称或者是一个dom结点。 PlayerVersion(_29) //http://www.wendangxiazai.com/b-6b9b1bbcf121dd36a32d82c6.html 创建版本号对象。 versionIsValid(fv) // 验证flash插件的当前版本号是否兼容fv的版本号（大于等于）。 getQueryParamValue = deconcept.util.getRequestParameter; FlashObject = deconcept.SWFObject; SWFObject = deconcept.SWFObject;
年度最佳JavaScript数据可视化和图表库
weixin_33943836的博客
01-04 195
现在有很多图表库，但哪一个最好用？这可能取决于许多因素，如业务需求，数据类型，图表本身的目的等等。在本文中，每个JavaScript图表库将与一些关键因素进行比较，包括图表类型，商业或免费和开源状态。这些图表库通过实践经验从而进行了彻底的分析，以最大限度地进行最佳比较。 1. React-Vis ReactJS是Facebook团队所创...
java中如何使用amcharts
pair00的专栏
05-21 2173
最近公司碰到需要用图表的形式显示一些数据，我就开始到网上查询，查到了jfreechart和amcharts,这两者我都实现过了，jfreechart最后生成图片，但是图片效果不是我想要的，然后又研究amcharts 它的效果确实很好，而且官方网站上还有好些例子可供下载，网址是:www.amcharts.com（想要完成一个amcharts图形需要swfobj
最新版--amCharts 5.2.3 javascript-charts
控件与插件之大全
11-18 547
所有图表，单包使用 amCharts 5 很容易——所有图表类型都在一个单一的、易于理解的包中！无需弄清楚产品系列——只需获取 amCharts 5 即可。由于它旨在与 React、Angular、Vue 等现代 Web 开发工具包一起使用，因此它开箱即用。
amchart使用柱状图配置
weixin_30740295的博客
02-19 493
Amcharts的特点包括: *动画或静态*价值轴能够扭转*线性或对数轴的价值尺度*预定义或定制的子弹*定制描述任何数据点*点击栏目/酒吧（可用于钻孔下来图表）*梯度弥漫*价值指标插入式*轴价值观内样区*平台无关*可以输出作为一项形象*可控制在途经的JavaScript*设置和数据可以通过直接从一个HTML文件*度身定做的形象或Flash （动画）背景*无限标签*旋转标签及轴价值观*数据可自动重...
amchart技术说明
06-25 2253
Amchart技术说明   一、amchart是什么 amchart是一组由flash做成的图表组件。这些flash没有数据，一但指定了配置文件和数据文件的地址，flash就可以显示出你所需要的图表。 在配置文件中可以设这个flash的颜色，大小，文字属性，柱子，曲线的粗细颜色，是什么类型的柱子或曲线，是否有气泡，是否有图例，定位，鼠标右键及其事件等，stock图还要在里面指定数据文件的地址。 在数据文件中存放了要展示的数，数据一般是XML类型的数据，也有用CSV或TXT的类型的数据。 这里所指
amCharts使用方式
前端开发＆搜索引擎优化
03-05 8011
2 0的时候才有用
amchart柱状图、折线图配置解析
sty2008boy的专栏
11-15 410
Amchart 柱状图配置解析 Tahoma true 0 0 85 0 ...
amcharts_4.5.15.zip
12-22
基于官方最新4.5.15的版本 完美去掉了左下角logo 基于官方最新4.5.15的版本 完美去掉了左下角logo
amcharts_flex_components_1.8.3.4
04-23
amcharts for flex 最后更新版本，此项目已于两年前停止维护，上传版本为停维前最新版本
Amcharts JS属性、方法详细使用说明/开发文档.pdf
12-04
Amcharts JS属性、方法详细使用说明/开发文档，中文版
amchart破解版本 图表，很好用
03-15
amchart破解版本 图表，很好用amchart破解版本 图表，很好用amchart破解版本 图表，很好用
amcharts.js
06-25
java前端柱状图、折线图、饼状图展示所需js,用的是Amcharts
“amcharts实现动态曲线”进一步解释
06-16
我之前有上传了一个资源“amcharts实现动态曲线”，看到许多评论说不能运行，我在我的博客里面，http://blog.csdn.net/pair00/article/details/5837869有进一步的解释，并且有许多朋友留言改进的方案，只不过闲杂amcharts已经进行了升级，这个JS的版本在官网上已经没有了，可能不能运行，我现在是没有权限删除自己的资源，请大家谅解，所以写了这个解释文件。
amcharts_flex_components_1.8.1.3
08-31
amcharts_flex_components_1.8.1 和开发示例
amcharts_flex_components_1.6.2.1.zip_am flex charts_amChartsFB3_
09-14
非常棒的flex图表3d控件，amcharts
amcharts_flex_components_1.8.3.3
11-15
flex 图表
amcharts图表使用总结
weixin_38316999的博客
05-22 7780
Amcharts JS 版属性/方法详细说明书1、     坐标轴（Y轴）  序号     属性名/方法名     作用     对象获取方法/常用属性值     示例1     valueAxis对象     图表的Y轴，一个图表中可以有多个Y轴     Var valueAxis = new AmCharts.ValueAxis();    2     axisColor      轴的颜色 ...
怎么用amcharts构建地图
最新发布
06-09
使用AmCharts构建地图需要遵循以下步骤： 1. 引入AmCharts的库文件。可以从AmCharts官网下载或者使用CDN链接引入。 2. 创建一个div容器来承载地图。 3. 创建一个地图对象，并设置地图的属性，例如地图类型、背景色、缩放等级等。 4. 加载地图数据。可以使用AmCharts提供的地图数据或者自己的地图数据。 5. 创建图层和图像对象，将地图数据显示在地图上。可以使用AmCharts提供的图层和图像对象，也可以自定义图层和图像对象。 6. 设置图层和图像对象的属性，例如颜色、边框、标签等。 7. 绑定事件处理程序，例如鼠标单击、鼠标移动等。 8. 将地图对象添加到div容器中显示。 下面是一个简单的例子： ```javascript // 引入AmCharts库文件 <script src="https://cdn.amcharts.com/lib/4/core.js"></script> <script src="https://cdn.amcharts.com/lib/4/maps.js"></script> <script src="https://cdn.amcharts.com/lib/4/geodata/worldLow.js"></script> // 创建一个div容器 <div id="chartdiv" style="width: 100%; height: 500px;"></div> // 创建地图对象 var chart = am4core.create("chartdiv", am4maps.MapChart); // 设置地图属性 chart.projection = new am4maps.projections.Miller(); chart.background.fill = am4core.color("#F5F5F5"); chart.zoomLevel = 2; // 加载地图数据 chart.geodata = am4geodata_worldLow; // 创建图层和图像对象 var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries()); var polygonTemplate = polygonSeries.mapPolygons.template; // 设置图层和图像对象属性 polygonTemplate.fill = am4core.color("#74B266"); polygonTemplate.stroke = am4core.color("#FFFFFF"); polygonTemplate.strokeWidth = 1; // 绑定事件处理程序 polygonTemplate.events.on("hit", function(ev) { console.log("Clicked on ", ev.target.dataItem.dataContext.name); }); // 将地图对象添加到div容器中显示 chart.homeZoomLevel = 2; chart.homeGeoPoint = { longitude: 0, latitude: 0 }; chart.seriesContainer.draggable = false; chart.seriesContainer.resizable = false; ``` 这个例子创建了一个包含世界地图的AmCharts地图，并且设置了地图的属性、图层和图像对象的属性，并且绑定了一个单击事件处理程序。你可以根据自己的需要调整这个例子。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值