0

0

amcharts实现动态数据介绍

零下一度

零下一度

发布时间:2017-07-27 16:12:02

|

2446人浏览过

|

来源于php中文网

原创

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

以下是方法:

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

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

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

   主要添加了:

chartData2变量

动力先锋仿阿里巴巴B2B电子商务系统
动力先锋仿阿里巴巴B2B电子商务系统

前台功能介绍:1、网页首页显示有高级会员推荐,精品推荐,商业机会分类列表,最新供求信息,网站动态,推荐企业,行业动态等;2、商业机会栏目功能有:二级分类,已经带有详细分类的数据库,后台可以更改增加操作,并可以推荐公司,栏目分为分类显示信息,最新的采购、供应、合作和代理信息,搜索时同样按分类,信息,时间,交易类型等搜索;3、展厅展品栏目功能:二级分类,已经带有详细分类的数据库,后台可以更改增加操作,

下载

reloadData方法

loadStringData方法

手动刷新按钮

[html] 查看纯文本 

<!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示例  
        < link rel = “stylesheet” href = “style.css” type = “text / css” >     
        < script src = “../amcharts / amcharts.js” type = “text / javascript” >              
        < 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年,  
                汽车:1241246,  
                摩托车: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年,  
                汽车:1241246,  
                摩托车: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); //五秒刷新  
  
  
   < body > < div id = “chartdiv” style = “width:100%; height:400px;” > 
< input type = “button” value = “手动刷新” onclick = “reloadData('')” />

相关专题

更多
C++ 高级模板编程与元编程
C++ 高级模板编程与元编程

本专题深入讲解 C++ 中的高级模板编程与元编程技术,涵盖模板特化、SFINAE、模板递归、类型萃取、编译时常量与计算、C++17 的折叠表达式与变长模板参数等。通过多个实际示例,帮助开发者掌握 如何利用 C++ 模板机制编写高效、可扩展的通用代码,并提升代码的灵活性与性能。

10

2026.01.23

php远程文件教程合集
php远程文件教程合集

本专题整合了php远程文件相关教程,阅读专题下面的文章了解更多详细内容。

27

2026.01.22

PHP后端开发相关内容汇总
PHP后端开发相关内容汇总

本专题整合了PHP后端开发相关内容,阅读专题下面的文章了解更多详细内容。

19

2026.01.22

php会话教程合集
php会话教程合集

本专题整合了php会话教程相关合集,阅读专题下面的文章了解更多详细内容。

19

2026.01.22

宝塔PHP8.4相关教程汇总
宝塔PHP8.4相关教程汇总

本专题整合了宝塔PHP8.4相关教程,阅读专题下面的文章了解更多详细内容。

10

2026.01.22

PHP特殊符号教程合集
PHP特殊符号教程合集

本专题整合了PHP特殊符号相关处理方法,阅读专题下面的文章了解更多详细内容。

11

2026.01.22

PHP探针相关教程合集
PHP探针相关教程合集

本专题整合了PHP探针相关教程,阅读专题下面的文章了解更多详细内容。

7

2026.01.22

菜鸟裹裹入口以及教程汇总
菜鸟裹裹入口以及教程汇总

本专题整合了菜鸟裹裹入口地址及教程分享,阅读专题下面的文章了解更多详细内容。

52

2026.01.22

Golang 性能分析与pprof调优实战
Golang 性能分析与pprof调优实战

本专题系统讲解 Golang 应用的性能分析与调优方法,重点覆盖 pprof 的使用方式,包括 CPU、内存、阻塞与 goroutine 分析,火焰图解读,常见性能瓶颈定位思路,以及在真实项目中进行针对性优化的实践技巧。通过案例讲解,帮助开发者掌握 用数据驱动的方式持续提升 Go 程序性能与稳定性。

9

2026.01.22

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
CSS3 教程
CSS3 教程

共18课时 | 4.8万人学习

R 教程
R 教程

共45课时 | 5.4万人学习

AngularJS教程
AngularJS教程

共24课时 | 2.9万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号