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方法

手动刷新按钮

[html][/html]

view plaincopy

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

三、定时器

可以添加定时器,调用ajax定时刷新页面数据

window.setInterval(“reloadData(”)”, 5000);//五秒刷新

四、破解插件

去掉左上角文字链接

注释amcharts_2.7.6\amcharts\amcharts.js\amcharts.js的一段代码即可(如果不好找,可以用myeclipse格式化一下),看以下截图:

五、此插件可配合Sigar展示服务器CPU、内存、磁盘、流量等数据

相关文章:

http://qiniu.devba.com/index.php/archives/2763.html

http://qiniu.devba.com/index.php/archives/2766.html

http://qiniu.devba.com/index.php/archives/2767.html

http://qiniu.devba.com/index.php/archives/2769.html

http://qiniu.devba.com/index.php/archives/2770.html

http://qiniu.devba.com/index.php/archives/2771.html

标签