amcharts php,amcharts实现动态数据介绍

JavaScript实现的，同样amcharts 2.7.6支持页面动态数据展现。

以下是方法：

一，去首先amcharts.com/download下载插件包

二，修改amcharts_2.7.6 \样本中的实例

以下是area100PercentStacked.html的动态实例，代码如下：

主要添加了：

chartData2变量

reloadData方法

loadStringData方法

手动刷新按钮

[html] 查看纯文本

< html >

< head >

< meta http-equiv = “Content-Type” content = “text / html; charset = utf-8” >

< title > amCharts示例 title >

< link rel = “stylesheet” href = “style.css” type = “text / css” >

< script src = “../amcharts / amcharts.js” type = “text / javascript” > script>

< script type = “text / javascript” >

变形图

var chartData = [{

年份：1994年，

汽车：1587，

摩托车：650，

自行车：121

}，{

年：1995年，

汽车：1567，

摩托车：683，

自行车：146

}，{

年：1996年，

汽车：1617，

摩托车：691，

自行车：138

}，{

年：1997年，

汽车：1630，

摩托车：642，

自行车：127

}，{

年份：1998年，

汽车：1660，

摩托车：699，

自行车：105

}，{

年份：1999年，

汽车：1683，

摩托车：721，

自行车：109

}，{

年份：2000年，

汽车：1691，

摩托车：737，

自行车：112

}，{

年份：2001年，

汽车：1298，

摩托车：680，

自行车：101

}，{

年：2002年，

汽车：1275，

摩托车：664，

自行车：97

}，{

年份：2003年，

汽车：1246，

摩托车：648，

自行车：93

}，{

年份：2004年，

汽车：1218，

摩托车：637，

自行车：101

}，{

年份：2005年，

汽车：1213，

摩托车：633，

自行车：87

}，{

年份：2006年，

汽车：1199，

摩托车：621，

自行车：79

}，{

年份：2007年，

汽车：1110，

摩托车：210，

自行车：81

}，{

年份：2008年，

汽车：1165，

摩托车：232，

自行车：75

}，{

年份：2009年，

汽车：1145，

摩托车：219，

自行车：88

}，{

年份：2010年，

汽车：1163，

摩托车：201，

自行车：82

}，{

年份：2011，

汽车：1180，

摩托车：285，

自行车：87

}，{

年份：2012，

汽车：1159，

摩托车：277，

自行车：71

}];

var chartData2 = [{

年：1995年，

汽车：1567，

摩托车：683，

自行车：146

}，{

年：1996年，

汽车：1617，

摩托车：691，

自行车：138

}，{

年：1997年，

汽车：1630，

摩托车：642，

自行车：127

}，{

年份：1998年，

汽车：1660，

摩托车：699，

自行车：105

}，{

年份：1999年，

汽车：1683，

摩托车：721，

自行车：109

}，{

年份：2000年，

汽车：1691，

摩托车：737，

自行车：112

}，{

年份：2001年，

汽车：1298，

摩托车：680，

自行车：101

}，{

年：2002年，

汽车：1275，

摩托车：664，

自行车：97

}，{

年份：2003年，

汽车：1246，

摩托车：648，

自行车：93

}，{

年份：2004年，

汽车：1218，

摩托车：637，

自行车：101

}，{

年份：2005年，

汽车：1213，

摩托车：633，

自行车：87

}，{

年份：2006年，

汽车：1199，

摩托车：621，

自行车：79

}，{

年份：2007年，

汽车：1110，

摩托车：210，

自行车：81

}，{

年份：2008年，

汽车：1165，

摩托车：232，

自行车：75

}，{

年份：2009年，

汽车：1145，

摩托车：219，

自行车：88

}，{

年份：2010年，

汽车：1163，

摩托车：201，

自行车：82

}，{

年份：2011，

汽车：1180，

摩托车：285，

自行车：87

}，{

年份：2012，

汽车：1159，

摩托车：277，

自行车：71

}，{

年份：2013年，

汽车：1259，

摩托车：377，

自行车：91

}];

AmCharts.ready(function(){

//串行图

chart = new AmCharts.AmSerialChart();

chart.pathToImages = “../amcharts/images/” ;

chart.zoomOutButton = {

backgroundColor：“＃000000”，

backgroundAlpha：0.15

};

chart.dataProvider = chartData ;

chart.categoryField = “year” ;

chart.addTitle(“每年交通事故”，15);

// AXES

//类别

var categoryAxis = chart .categoryAxis;

categoryAxis.gridAlpha = 0 .07;

categoryAxis.axisColor = “#DADADA” ;

categoryAxis.startOnAxis = true ;

//值

var valueAxis = new AmCharts.ValueAxis();

valueAxis.title = “percent” ; //这行使图表“堆叠”

valueAxis.stackType = “100％” ;

valueAxis.gridAlpha = 0 .07;

chart.addValueAxis(valueAxis);

// GRAPHS

//第一张图

var graph = new AmCharts.AmGraph();

graph.type = “line” ; //这是简单的线图

graph.title = “汽车” ;

graph.valueField = “cars” ;

graph.balloonText = “[[value]]([[ percents ]]％)” ;

graph.lineAlpha = 0 ;

graph.fillAlphas = 0 0.6; //将fillAlphas设置为 > 0，使其成为区域图

chart.addGraph(图形);

//第二张图

var graph = new AmCharts.AmGraph();

graph.type = “line” ;

graph.title = “摩托车” ;

graph.valueField = “摩托车” ;

graph.balloonText = “[[value]]([[ percents ]]％)” ;

graph.lineAlpha = 0 ;

graph.fillAlphas = 0 0.6;

chart.addGraph(图形);

//第三张图

var graph = new AmCharts.AmGraph();

graph.type = “line” ;

graph.title = “自行车” ;

graph.valueField = “bike” ;

graph.balloonText = “[[value]]([[ percents ]]％)” ;

graph.lineAlpha = 0 ;

graph.fillAlphas = 0 0.6;

chart.addGraph(图形);

// LEGEND

var legend = new AmCharts.AmLegend();

legend.align = “center” ;

chart.addLegend(图例);

// CURSOR

var chartCursor = new AmCharts.ChartCursor();

chartCursor.zoomable = false ; //因为图表显示的值不是太多，所以禁用缩放

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 {

//代码为IE6，IE5

var request = new ActiveXObject('Microsoft.XMLHTTP');

}

//加载

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;” >

< input type = “button” value = “手动刷新” onclick = “reloadData('')” />