老版的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="手动刷新" onclick="reloadData('')"/>
- </body>
- </html>
三、定时器
可以添加定时器,调用ajax定时刷新页面数据
window.setInterval("reloadData('')", 5000);//五秒刷新
四、破解插件
去掉左上角文字链接
注释amcharts_2.7.6\amcharts\amcharts.js\amcharts.js的一段代码即可(如果不好找,可以用myeclipse格式化一下),看以下截图:
五、此插件可配合Sigar展示服务器CPU、内存、磁盘、流量等数据