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的动态实例,代码如下:

   主要添加了:

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

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

下载

chartData2变量

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示例</ 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年,  
                汽车: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); //五秒刷新  
  
  
 </ script > </ head > < body > < div id = “chartdiv” style = “width:100%; height:400px;” > </div      > < input type = “button” value = “手动刷新” onclick = “reloadData('')” />      
</ body >  
</ html >

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
Golang 测试体系与代码质量保障:工程级可靠性建设
Golang 测试体系与代码质量保障:工程级可靠性建设

Go语言测试体系与代码质量保障聚焦于构建工程级可靠性系统。本专题深入解析Go的测试工具链(如go test)、单元测试、集成测试及端到端测试实践,结合代码覆盖率分析、静态代码扫描(如go vet)和动态分析工具,建立全链路质量监控机制。通过自动化测试框架、持续集成(CI)流水线配置及代码审查规范,实现测试用例管理、缺陷追踪与质量门禁控制,确保代码健壮性与可维护性,为高可靠性工程系统提供质量保障。

6

2026.02.28

Golang 工程化架构设计:可维护与可演进系统构建
Golang 工程化架构设计:可维护与可演进系统构建

Go语言工程化架构设计专注于构建高可维护性、可演进的企业级系统。本专题深入探讨Go项目的目录结构设计、模块划分、依赖管理等核心架构原则,涵盖微服务架构、领域驱动设计(DDD)在Go中的实践应用。通过实战案例解析接口抽象、错误处理、配置管理、日志监控等关键工程化技术,帮助开发者掌握构建稳定、可扩展Go应用的最佳实践方法。

6

2026.02.28

Golang 性能分析与运行时机制:构建高性能程序
Golang 性能分析与运行时机制:构建高性能程序

Go语言以其高效的并发模型和优异的性能表现广泛应用于高并发、高性能场景。其运行时机制包括 Goroutine 调度、内存管理、垃圾回收等方面,深入理解这些机制有助于编写更高效稳定的程序。本专题将系统讲解 Golang 的性能分析工具使用、常见性能瓶颈定位及优化策略,并结合实际案例剖析 Go 程序的运行时行为,帮助开发者掌握构建高性能应用的关键技能。

8

2026.02.28

Golang 并发编程模型与工程实践:从语言特性到系统性能
Golang 并发编程模型与工程实践:从语言特性到系统性能

本专题系统讲解 Golang 并发编程模型,从语言级特性出发,深入理解 goroutine、channel 与调度机制。结合工程实践,分析并发设计模式、性能瓶颈与资源控制策略,帮助将并发能力有效转化为稳定、可扩展的系统性能优势。

14

2026.02.27

Golang 高级特性与最佳实践:提升代码艺术
Golang 高级特性与最佳实践:提升代码艺术

本专题深入剖析 Golang 的高级特性与工程级最佳实践,涵盖并发模型、内存管理、接口设计与错误处理策略。通过真实场景与代码对比,引导从“可运行”走向“高质量”,帮助构建高性能、可扩展、易维护的优雅 Go 代码体系。

17

2026.02.27

Golang 测试与调试专题:确保代码可靠性
Golang 测试与调试专题:确保代码可靠性

本专题聚焦 Golang 的测试与调试体系,系统讲解单元测试、表驱动测试、基准测试与覆盖率分析方法,并深入剖析调试工具与常见问题定位思路。通过实践示例,引导建立可验证、可回归的工程习惯,从而持续提升代码可靠性与可维护性。

2

2026.02.27

漫蛙app官网链接入口
漫蛙app官网链接入口

漫蛙App官网提供多条稳定入口,包括 https://manwa.me、https

130

2026.02.27

deepseek在线提问
deepseek在线提问

本合集汇总了DeepSeek在线提问技巧与免登录使用入口,助你快速上手AI对话、写作、分析等功能。阅读专题下面的文章了解更多详细内容。

8

2026.02.27

AO3官网直接进入
AO3官网直接进入

AO3官网最新入口合集,汇总2026年可用官方及镜像链接,助你快速稳定访问Archive of Our Own平台。阅读专题下面的文章了解更多详细内容。

208

2026.02.27

热门下载

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

精品课程

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

共18课时 | 6.3万人学习

R 教程
R 教程

共45课时 | 7.3万人学习

AngularJS教程
AngularJS教程

共24课时 | 3.9万人学习

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

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