现在的位置: 首页 > 综合 > 正文

amcharts _ 2.7.6 实现动态数据展现

2018年05月20日 ⁄ 综合 ⁄ 共 10688字 ⁄ 字号 评论关闭

老版的amcharts是基于flash的,新版的是javascript实现的,同样amcharts 2.7.6支持页面动态数据展现。

以下是方法:

一、首先去http://amcharts.com/download下载插件包

二、修改amcharts_2.7.6\samples中的实例

     以下是area100PercentStacked.html的动态实例,代码如下:

   主要添加了:

chartData2变量

reloadData方法

loadStringData方法

手动刷新按钮

[html] view
plain
copy

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
  2. <html>  
  3.       
  4.     <head>  
  5.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  6.         <title>amCharts examples</title>  
  7.         <link rel="stylesheet" href="style.css" type="text/css">  
  8.         <script src="../amcharts/amcharts.js" type="text/javascript"></script>           
  9.         <script type="text/javascript">  
  10.             var chart;  
  11.   
  12.             var chartData = [{  
  13.                 year: 1994,  
  14.                 cars: 1587,  
  15.                 motorcycles: 650,  
  16.                 bicycles: 121  
  17.             }, {  
  18.                 year: 1995,  
  19.                 cars: 1567,  
  20.                 motorcycles: 683,  
  21.                 bicycles: 146  
  22.             }, {  
  23.                 year: 1996,  
  24.                 cars: 1617,  
  25.                 motorcycles: 691,  
  26.                 bicycles: 138  
  27.             }, {  
  28.                 year: 1997,  
  29.                 cars: 1630,  
  30.                 motorcycles: 642,  
  31.                 bicycles: 127  
  32.             }, {  
  33.                 year: 1998,  
  34.                 cars: 1660,  
  35.                 motorcycles: 699,  
  36.                 bicycles: 105  
  37.             }, {  
  38.                 year: 1999,  
  39.                 cars: 1683,  
  40.                 motorcycles: 721,  
  41.                 bicycles: 109  
  42.             }, {  
  43.                 year: 2000,  
  44.                 cars: 1691,  
  45.                 motorcycles: 737,  
  46.                 bicycles: 112  
  47.             }, {  
  48.                 year: 2001,  
  49.                 cars: 1298,  
  50.                 motorcycles: 680,  
  51.                 bicycles: 101  
  52.             }, {  
  53.                 year: 2002,  
  54.                 cars: 1275,  
  55.                 motorcycles: 664,  
  56.                 bicycles: 97  
  57.             }, {  
  58.                 year: 2003,  
  59.                 cars: 1246,  
  60.                 motorcycles: 648,  
  61.                 bicycles: 93  
  62.             }, {  
  63.                 year: 2004,  
  64.                 cars: 1218,  
  65.                 motorcycles: 637,  
  66.                 bicycles: 101  
  67.             }, {  
  68.                 year: 2005,  
  69.                 cars: 1213,  
  70.                 motorcycles: 633,  
  71.                 bicycles: 87  
  72.             }, {  
  73.                 year: 2006,  
  74.                 cars: 1199,  
  75.                 motorcycles: 621,  
  76.                 bicycles: 79  
  77.             }, {  
  78.                 year: 2007,  
  79.                 cars: 1110,  
  80.                 motorcycles: 210,  
  81.                 bicycles: 81  
  82.             }, {  
  83.                 year: 2008,  
  84.                 cars: 1165,  
  85.                 motorcycles: 232,  
  86.                 bicycles: 75  
  87.             }, {  
  88.                 year: 2009,  
  89.                 cars: 1145,  
  90.                 motorcycles: 219,  
  91.                 bicycles: 88  
  92.             }, {  
  93.                 year: 2010,  
  94.                 cars: 1163,  
  95.                 motorcycles: 201,  
  96.                 bicycles: 82  
  97.             }, {  
  98.                 year: 2011,  
  99.                 cars: 1180,  
  100.                 motorcycles: 285,  
  101.                 bicycles: 87  
  102.             }, {  
  103.                 year: 2012,  
  104.                 cars: 1159,  
  105.                 motorcycles: 277,  
  106.                 bicycles: 71  
  107.             }];  
  108.               
  109.             var chartData2 = [{  
  110.                 year: 1995,  
  111.                 cars: 1567,  
  112.                 motorcycles: 683,  
  113.                 bicycles: 146  
  114.             }, {  
  115.                 year: 1996,  
  116.                 cars: 1617,  
  117.                 motorcycles: 691,  
  118.                 bicycles: 138  
  119.             }, {  
  120.                 year: 1997,  
  121.                 cars: 1630,  
  122.                 motorcycles: 642,  
  123.                 bicycles: 127  
  124.             }, {  
  125.                 year: 1998,  
  126.                 cars: 1660,  
  127.                 motorcycles: 699,  
  128.                 bicycles: 105  
  129.             }, {  
  130.                 year: 1999,  
  131.                 cars: 1683,  
  132.                 motorcycles: 721,  
  133.                 bicycles: 109  
  134.             }, {  
  135.                 year: 2000,  
  136.                 cars: 1691,  
  137.                 motorcycles: 737,  
  138.                 bicycles: 112  
  139.             }, {  
  140.                 year: 2001,  
  141.                 cars: 1298,  
  142.                 motorcycles: 680,  
  143.                 bicycles: 101  
  144.             }, {  
  145.                 year: 2002,  
  146.                 cars: 1275,  
  147.                 motorcycles: 664,  
  148.                 bicycles: 97  
  149.             }, {  
  150.                 year: 2003,  
  151.                 cars: 1246,  
  152.                 motorcycles: 648,  
  153.                 bicycles: 93  
  154.             }, {  
  155.                 year: 2004,  
  156.                 cars: 1218,  
  157.                 motorcycles: 637,  
  158.                 bicycles: 101  
  159.             }, {  
  160.                 year: 2005,  
  161.                 cars: 1213,  
  162.                 motorcycles: 633,  
  163.                 bicycles: 87  
  164.             }, {  
  165.                 year: 2006,  
  166.                 cars: 1199,  
  167.                 motorcycles: 621,  
  168.                 bicycles: 79  
  169.             }, {  
  170.                 year: 2007,  
  171.                 cars: 1110,  
  172.                 motorcycles: 210,  
  173.                 bicycles: 81  
  174.             }, {  
  175.                 year: 2008,  
  176.                 cars: 1165,  
  177.                 motorcycles: 232,  
  178.                 bicycles: 75  
  179.             }, {  
  180.                 year: 2009,  
  181.                 cars: 1145,  
  182.                 motorcycles: 219,  
  183.                 bicycles: 88  
  184.             }, {  
  185.                 year: 2010,  
  186.                 cars: 1163,  
  187.                 motorcycles: 201,  
  188.                 bicycles: 82  
  189.             }, {  
  190.                 year: 2011,  
  191.                 cars: 1180,  
  192.                 motorcycles: 285,  
  193.                 bicycles: 87  
  194.             }, {  
  195.                 year: 2012,  
  196.                 cars: 1159,  
  197.                 motorcycles: 277,  
  198.                 bicycles: 71  
  199.             }, {  
  200.                 year: 2013,  
  201.                 cars: 1259,  
  202.                 motorcycles: 377,  
  203.                 bicycles: 91  
  204.             }];  
  205.   
  206.             AmCharts.ready(function () {  
  207.                 // SERIAL CHART  
  208.                 chart = new AmCharts.AmSerialChart();  
  209.                 chart.pathToImages = "../amcharts/images/";  
  210.                 chart.zoomOutButton = {  
  211.                     backgroundColor: "#000000",  
  212.                     backgroundAlpha: 0.15  
  213.                 };  
  214.                 chart.dataProvider = chartData;  
  215.                 chart.categoryField = "year";  
  216.   
  217.                 chart.addTitle("Traffic incidents per year", 15);  
  218.   
  219.                 // AXES  
  220.                 // Category  
  221.                 var categoryAxis = chart.categoryAxis;  
  222.                 categoryAxis.gridAlpha = 0.07;  
  223.                 categoryAxis.axisColor = "#DADADA";  
  224.                 categoryAxis.startOnAxis = true;  
  225.   
  226.                 // Value  
  227.                 var valueAxis = new AmCharts.ValueAxis();  
  228.                 valueAxis.title = "percent"; // this line makes the chart "stacked"  
  229.                 valueAxis.stackType = "100%";  
  230.                 valueAxis.gridAlpha = 0.07;  
  231.                 chart.addValueAxis(valueAxis);  
  232.   
  233.                 // GRAPHS  
  234.                 // first graph  
  235.                 var graph = new AmCharts.AmGraph();  
  236.                 graph.type = "line"; // it's simple line graph  
  237.                 graph.title = "Cars";  
  238.                 graph.valueField = "cars";  
  239.                 graph.balloonText = "[[value]] ([[percents]]%)";  
  240.                 graph.lineAlpha = 0;  
  241.                 graph.fillAlphas = 0.6; // setting fillAlphas to > 0 value makes it area graph   
  242.                 chart.addGraph(graph);  
  243.   
  244.                 // second graph  
  245.                 var graph = new AmCharts.AmGraph();  
  246.                 graph.type = "line";  
  247.                 graph.title = "Motorcycles";  
  248.                 graph.valueField = "motorcycles";  
  249.                 graph.balloonText = "[[value]] ([[percents]]%)";  
  250.                 graph.lineAlpha = 0;  
  251.                 graph.fillAlphas = 0.6;  
  252.                 chart.addGraph(graph);  
  253.   
  254.                 // third graph  
  255.                 var graph = new AmCharts.AmGraph();  
  256.                 graph.type = "line";  
  257.                 graph.title = "Bicycles";  
  258.                 graph.valueField = "bicycles";  
  259.                 graph.balloonText = "[[value]] ([[percents]]%)";  
  260.                 graph.lineAlpha = 0;  
  261.                 graph.fillAlphas = 0.6;  
  262.                 chart.addGraph(graph);  
  263.   
  264.                 // LEGEND  
  265.                 var legend = new AmCharts.AmLegend();  
  266.                 legend.align = "center";  
  267.                 chart.addLegend(legend);  
  268.   
  269.                 // CURSOR  
  270.                 var chartCursor = new AmCharts.ChartCursor();  
  271.                 chartCursor.zoomable = false; // as the chart displayes not too many values, we disabled zooming  
  272.                 chartCursor.cursorAlpha = 0;  
  273.                 chart.addChartCursor(chartCursor);  
  274.   
  275.                 // WRITE  
  276.                 chart.write("chartdiv");  
  277.             });  
  278.             //刷新事件  
  279.             function reloadData(url) {  
  280.                 var dynamicData = loadStringData(url);  
  281.                 //fileSystemChart.dataProvider = eval('(' + dynamicData + ')');//如果ajax获取得来的数据含有引号,需要eval()函数处理一下  
  282.                 chart.dataProvider = dynamicData;  
  283.                 chart.validateNow();  
  284.                 chart.validateData();  
  285.             }  
  286.             //ajax请求  
  287.             function loadStringData(link) {  
  288.               
  289.                 return chartData2;  
  290.                   
  291.                 /* 下面的是ajax请求,可以从服务器获取动态数据  
  292.                if (window.XMLHttpRequest) {  
  293.                    // IE7+, Firefox, Chrome, Opera, Safari  
  294.                    var request = new XMLHttpRequest();  
  295.                }  
  296.                else {  
  297.                    // code for IE6, IE5  
  298.                    var request = new ActiveXObject('Microsoft.XMLHTTP');  
  299.                }  
  300.                // load  
  301.                request.open('GET', link, false);  
  302.                request.send();  
  303.                return request.responseText;  
  304.                */  
  305.             }  
  306.   
  307.   
  308. window.setInterval("reloadData('')", 5000);//五秒刷新  
  309.   
  310.   
  311.  </script> </head> <body> <div id="chartdiv" style="width:100%; height:400px;"></div> <input type="button" value="手动刷新" onclick="reloadData('')"/>  
  312. </body>  
  313. </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

抱歉!评论已关闭.