Introduction to dynamic data implementation in amcharts

Implemented in JavaScript, amcharts 2.7.6 also supports page dynamic data display.

The following is the method:

First, go to amcharts.com/download to download the plug-in package

Second, modify the example in amcharts_2.7.6\sample

The following is a dynamic example of area100PercentStacked.html, the code is as follows:

Mainly added:

chartData2 variable

reloadData method

loadStringData method

Manual refresh button

[html] View plain text

<！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示例</ 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 （&#39;（&#39;+ dynamicData +&#39;）&#39;）; //如果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（&#39;Microsoft.XMLHTTP&#39;）;  
               }  
               //加载  
               request.open（&#39;GET&#39;，link，false）;  
               request.send（）;  
               return request.responseText;  
               * /  
            }  
  
  
window.setInterval（“reloadData（&#39;&#39;）”，5000）; //五秒刷新  
  
  
 </ script > </ head > < body > < div id = “chartdiv” style = “width：100％; height：400px;” > </div      > < input type = “button” value = “手动刷新” onclick = “reloadData（&#39;&#39;）” />      
</ body >  
</ html >

The above is the detailed content of Introduction to dynamic data implementation in amcharts. For more information, please follow other related articles on the PHP Chinese website!